1

我正在尝试在 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;
}
4

4 回答 4

5

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;
    }
}
于 2012-07-22T12:34:07.037 回答
2

你应该这样说：

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

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

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

编辑：[由于 Quentin 建议使用 diff 工具，谢谢 Quentin]

我将 spanId++ 放在 remove 函数的末尾，以便在每次调用时都使用相同的 spanId 值调用 changeClass 和 remove 函数。

于 2012-07-22T12:35:59.347 回答
-1 
function changeClass(){
 $('#'+spanId).addClass("hilite");
 setTimeout(remove, 1000);
 spanId++;}

在此代码中，您应该spanId++在作为参数传递给 setTimeout 的回调函数中执行，因为 JS 在完成 setTimeout 语句之前不会停止执行。

所以你的代码应该是这样的：

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

function remove(){
  $('#'+spanId).removeClass("hilite");
  spanId++;
  return true;
}
于 2012-07-22T12:36:12.327 回答
-2

这对我有用，也增加了一些超时控制。

changeClass();

function changeClass(){
    $("#container").addClass("box");
    console.log("changeClass()");
    clearTimeout(interval);
    interval = setTimeout(remove, 1000);
}

function remove(){
    $("#container").removeClass("box");
    console.log("remove()");
    clearTimeout(interval);
    interval = setInterval(changeClass,1000);
}
于 2012-07-22T12:40:47.817 回答