无法每 1 秒在 类 之间切换

Question

我正在尝试使用计时器切换我的 div class，但我总是在 2 个 class 之间切换。

这里是div代码的开头

<div id="this" class="photobanner">

你可以查看我下面制作的JQuery函数和计时器

function autoAddClass(){
    if( $( '#this' ).hasClass( 'first' ))
        $('.first').addClass('last');
    if{$('#this').hasClass('last'))
        $('.last').addClass('first');
    }
 setTimeout(autoAddClass, 1000);

这不起作用

Answer 1

function autoAddClass(){
    if( $( '#this' ).hasClass( 'first' ))
        $('.first').addClass('last');
    if{$('#this').hasClass('last'))
        $('.last').addClass('first');
    }
 setTimeout(autoAddClass, 1000);

您的第二个 if 子句无效。尝试： if ($('#this').hasClass('last')) {...}

此外，我认为您应该使用 toggleClass，因为在第一个 autoAddClass 之后，您的元素将同时具有 类.

Answer 2

向元素添加新的 class 是可以的，但是在添加新元素之前不应该删除现有的 class。

JS代码：

setInterval(function(){
autoAddClass();}
, 1000);
     function autoAddClass() {
    console.log('timer elapsed');
    if ($('#container').hasClass('green')) {
        $('.green').removeClass('green').addClass('red');
    console.log('green');
    } else {
        $('.red').removeClass('red').addClass('green');
     console.log('red');
    }
}

现场演示@JSFiddle：http://jsfiddle.net/dreamweiver/mpLq6f7b/2/

注意：切勿将 this 关键字用于 variables/id/class 选择器，这也是一种不好的做法 this 是 javascript[=28 中的保留关键字=]

Answer 3

实际上第二个 if 语句你错误地把 '{' 而不是 '('。对于非常第二你必须改变 class 意味着使用 setInterval

您的函数在 jquery

中使用 toggleClass

function autoAddClass(){
    $('#this').toggleClass("first last");
}
$('#this').addClass('first');
setInterval(autoAddClass, 1000);

Fiddle