Question

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

这是div代码的开头

＆＃13;

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

＆＃13;

您可以查看我在下面创建的JQuery函数和计时器

＆＃13;

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

＆＃13;

这不起作用

Answer 1

实际上，如果您错误地提出了第二个陈述，那么＆＃39; {＆＃39;而不是＆＃39;（对于verey秒，你必须改变类意味着使用setInterval

您的函数在jquery中使用toggleClass

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

Fiddle

Answer 2

＆＃13;

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

＆＃13;

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

另外，我认为你应该使用toggleClass，因为在第一个autoAddClass之后，你的元素将同时拥有这两个类。

Answer 3

向元素添加新类很好，但是在添加新类之前不应该删除现有的类。

JS CODE：

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/

注意：永远不要对变量/ id / class选择器使用this关键字，这也是一个不好的做法this是javascript中的保留关键字

每1秒不能在类之间切换

3 个答案: