带有计时器的jQuery addClass removeClass [英] jQuery addClass removeClass with timer

问题描述

最新新闻"模块有问题.请查看 http://www.proudfootsupermarkets.com/，以查看该模块的示例(靠近页面顶部的div，其中包含较大的图片.

I have an issue with a 'Latest News' module. Please have a look at http://www.proudfootsupermarkets.com/ to see an example of the module (it's the div close to the top of the page which has a large image in it).

目前，我已经对其进行了设置，以便当用户单击选项卡时，会显示主要文章. jQuery的是:

At the moment I have it set up so that when a user clicks on a tab the main article shows. The jQuery for this is:

    jQuery(document).ready(function() {

    $(".moduletable.latestnews article:first-child").addClass("atfront")

    $(".moduletable.latestnews article").click(function(){
        $(".moduletable.latestnews article").css("zIndex",1).addClass("atback").removeClass("atfront");
        $(this).css("zIndex",100).addClass("atfront").removeClass("atback");
    });
});

这一切都非常简单直接.我遇到的问题是，我希望文章在几秒钟后自动更改.然后从第1条开始进入无限循环，然后在几秒钟后显示第2条，以此类推...

This is all quite simple and straight forward. The problem that I am having is that I want the articles to change automatically after a few seconds. This would then go in an infinite loop starting with article 1 and then after a couple of seconds showing article 2 etc etc...

我确信这相当简单，但是我已经用尽了我对JavaScript的知识.谢谢您能提供的任何帮助:)

I am sure that this is fairly simple but I have just about exhausted my knowledge of JavaScript. Thank you for any help that you are able to give :)

我创建了一个jsfiddle http://jsfiddle.net/Bempv/

I have created a jsfiddle http://jsfiddle.net/Bempv/

推荐答案

您可以使用setTimeout更改前面的文章.如果选择类别为".atfront"的文章，然后使用.next()选择器，则应获得所需的功能

You can use setTimeout to change the article in front. If you select the article with the class ".atfront" and then use the .next() selector you should get the functionality you are looking for

$(function(){
    var articleToggler = function articleToggler(){
    var front = "atfront",
        back = "atback";
    return function(){
       var selection = $(".moduletable.latestnews")
                          .find("article.atfront")
                          .addClass(back)
                          .removeClass(front);
           next = selection.next("article"); 
           next = next.length ? next : $(".moduletable.latestnews")
                                   .find("article").first();
           next.addClass(front)
               .removeClass(back);
           console.log(selection.length,next[0])  


       setTimeout(articleToggler(),1000); //changes every second
    };
};

//start the rotation
(articleToggler())();
});

一旦超时到期，setTimeout将调用作为第一个参数传递的函数. timeout参数以毫秒为单位，因此上述代码在调用该函数之前要等待1秒钟.由于上面的函数将其自身添加为回调，因此可以无限重复

The setTimeout will call the function passed as the first argument once the timeout expires. The timeout argument is in miliseconds so the above code wait for 1 second before calling the function. Since the above function adds it self as the callback this will repeat indefinately

这篇关于带有计时器的jQuery addClass removeClass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！