jQuery函数调用不起作用

jQuery function call not working

本文关键字：不起作用 函数调用 jQuery      更新时间：2024-01-08

我正试图在<span>中添加和删除一个类，但尽管正在调用该函数，removeClass仍不起作用。

setInterval(changeClass,4000);
var spanId=1;
function changeClass(){
 $('#'+spanId).addClass("hilite");
 setTimeout(remove, 1000);
 spanId++;}  
function remove(){
 $('#'+spanId).removeClass("hilite");
  return true;
  }

有人能说出原因吗？

我怎么能用这样的循环来做到这一点？我尝试了所有的方法，但没有让它工作

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;
}

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;
    }
}

您应该这样说：

setInterval(changeClass, 4000);
var spanId = 1;
function changeClass() {
    $('#'+spanId).addClass("hilite");
    setTimeout(remove, 1000);
}  
function remove() {
    $('#'+spanId).removeClass("hilite");
    spanId++;  // <--
    return true;
}

编辑：【由于昆汀建议使用diff工具，感谢昆汀】

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

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;
}

这对我很有效，还添加了一些超时控制。

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);
}
相关文章：