jQuery函数调用不起作用

Question

我试图在a中添加和删除一个类<span>,但是当调用该函数时,removeClass不起作用.

setInterval(changeClass,4000);

var spanId=1;

function changeClass(){
 $('#'+spanId).addClass("hilite");
 setTimeout(remove, 1000);
 spanId++;}  

function remove(){
 $('#'+spanId).removeClass("hilite");
  return true;
  }

任何人都可以说出原因吗？

我怎么能用这样的while循环这样做我尝试了所有的方法,但不能让它工作

var spanSet=4;
var spanId=1;
while(spanSet > 0)
{
changeClass();
spanSet--;
}

function changeClass(){
$('#'+spanId).addClass("hilite");
setTimeout(remove, 3000);
}

function remove(){
$('#'+spanId).removeClass("hilite");
spanId++;
return true;
}

Answer 1

spanId在超时完成之前递增,因此您尝试从下一个项而不是最后一个项中删除该类.

避免此问题的常用方法是使用闭包,但在这种情况下,移动spanId++;到remove函数末尾会更简单.

闭包方法(在这种情况下我不推荐,因为它与仅移动增量相比过于复杂)可能如下所示:

setInterval(changeClass, 4000);
var spanId = 1;

function changeClass() {
    $('#' + spanId).addClass("hilite");
    setTimeout(
        remove(spanId), // CALL remove and pass spanId as an argument
        1000
    );
    spanId++;
}

function remove(spanId) {
    return function () { // RETURN a function from remove().
        // Note: This spanId is the local variable defined in the argument list
        //       not the one that exists in the wider scope
        $('#' + spanId).removeClass("hilite");
        return true;
    }
}