使用jQuery每10秒切换div？

Question

我有两个div设置好了，当点击链接时，它们从蓝色变成橙色。它们在同一个位置上，仅仅给人们交换颜色的印象。这是我的jquery代码：

jQuery(document).ready(function( $ ) {
    $(".dab").click(function(){
        $("#pf-orange-area").show();
        $("#pf-blue-area").hide();
    });
    $(".pfs").click(function(){
        $("#pf-orange-area").hide();
        $("#pf-blue-area").show();
    });
});

我该如何保留这种功能，同时又能让它们每10秒钟自动切换？

- Rob

---

为什么要使用两个 jQuery(document).ready(function( $ )？ 这段代码意味着在文档加载时运行 jQuery 函数。$ 符号是 jQuery 的缩写，通过将 $ 作为参数传递给函数，我们可以在函数内部将 $ 指定为 jQuery 对象。使用两个 jQuery(document).ready 函数可能是为了确保所有的 jQuery 文件都已经加载并准备就绪。 - Deepak Ingole

@captain 不熟练！我会将它们合并成一个。 - Rob

setInterval 可能更合适，因为它可以每10秒更改一次。 - msturdy

@msturdy 您是正确的，我的错。 - Joum

我看到我的答案晚了，但是想着你可能还是会看一下的。我给了你很多评论，并尝试充分解释了正在发生的事情，这样你就可以看到这个操作有多么容易，以及如何“理解”你正在做什么。祝你好运，欢迎来到SO！享受jQuery吧！它非常有趣！ - SpYk3HH

Answer 1

在你的代码中使用setInterval()。像这样：

jQuery(document).ready(function ($) {
    var toggle = function () {
        $("#pf-orange-area, #pf-blue-area").toggle();
    }
    var anim = setInterval(toggle, 1000);
    $('button').on('click', function () {
        clearInterval(anim);
    });
});

要暂停/停止动画，请执行以下操作：

clearInterval(anim);

Check this Updated JSFiddle

- Praveen

---

@Rob 我正在尝试展示一段代码示例，这样你就可以轻松理解。 - Praveen

Answer 2

jQuery(function($) {

    var $or = $("#pf-orange-area"),
        $bl = $("#pf-blue-area"),
        changeColor;

    $(".dab").click(function(){
        $or.show();
        $bl.hide();
    });

    $(".pfs").click(function(){
        $or.hide();
        $bl.show();
    });

    changeColor = function() {
        $or.toggle();
        $bl.toggle();
    };

    setInterval(changeColor, 10000);
});

因此，他的一个有色元素现在必须隐藏，另一个显示。

- Maykonn

Answer 3

在这里应该使用setInterval。

考虑以下内容：

window.setInterval(yourfunction, 10000); //10000 = 10 sec

function yourfunction() { alert('test'); } //whatever you want it to do, test is purely for demonstration purposes

- Myles

---

更好的做法是在使用函数之前定义它们。为了代码可读性。 - Roko C. Buljan

没错。我回答时没有考虑可读性！你应该看看我的一些代码，远非易读哈哈。 - Myles

Answer 4

var b = true;

setInterval(function() {
   $( b ? '.dab' : '.pfs').trigger('click');
   b = ! b;
}, 10000);

- Virus721

---

或者只需 .click();。 - Roko C. Buljan

Answer 5

var i = 0,
handle = setInterval(function(){


    if(i%2 === 0){ //every other time (0,2,4 etc)

        $("#pf-orange-area").show();
        $("#pf-blue-area").hide();

    }else{ // every 'odd' time (1,2,3)

        $("#pf-orange-area").hide();
        $("#pf-blue-area").show();

    }    

    i++; 
},10000);

//to stop it:
//clearInterval(handle);

根据初始可见状态，您可能希望切换if和else的主体。

- Johan

---

为什么要重复编写代码，不如直接使用例如 $(".dab").click(); 的方式？ - Roko C. Buljan

@RokoC.Buljan 应该将两种情况都添加到一个函数中，而不是触发点击事件，该函数被引用为一个点击处理程序回调并在间隔中触发。我更喜欢这样做，而不是触发事件。但我想他可能会自己解决 :) - Johan

Answer 6

正如其他人所说，您可以使用setInterval。但是对于实现，我建议这样做：

function toggleAreas() {
    $("#pf-blue-area, #pf-orange-area").toggle();
}

$(document).ready(function(){
    setInterval(toggleAreas, 10000);
});

- VahidNaderi

Answer 7

我看到你最终选择了一个答案，但是我想加入我的两分钱，因为我用一个长的解释做了这个例子。我希望这对你的理解有所帮助。

第一个例子有一个计时器变量，使得每次更改都可以重置你的10秒计时器。这样，点击具有你的类名的元素也会重置计时器。

旁注：在下面的例子中，我使用 .on() 。如果您使用的是 jQuery 1.7 之前的版本，则可以将 .on() 替换为 .live()。

示例

var tmrShowHide;  //  this variable will act as out timer for keeping up with time changes
    //    if you don't want to reset the 10 seconds everytime there is a change, 
    //    then please see exmple 2
function divShowHide() {  //  this will be the method used to change the colors and reset the timer
    clearTimeout(tmrShowHide);    //    clears previous timer so 10 seconds is reset

    //  the .toggle method will simply toggle the visible state (display in css) of the element it's called upon
    //  so if we start with one hidden and one visible, then this is all that is needed to make the change!
    //  also note that i'm calling both elements at once, as they'll both undergo the "toggle" change
    $('#pf-blue-area, #pf-orange-area').toggle();

    tmrShowHide = setTimeout(divShowHide, 10000);    //    resets timer to 10 seconds
}

$(function() {  //  Same as $(document).ready(function() { // just shorter!
    //  the following establiches our click event on the 2 class types
    $(document).on('click', '.dab, .pfs', divShowHide);
    //  this will begin the timer and give us a variable that can be cleared as needed
    tmrShowHide = setTimeout(divShowHide, 10000);
})

所以没有注释的话，它就很简单：

var tmrShowHide;
function divShowHide() {
    clearTimeout(tmrShowHide);
    $('#pf-blue-area, #pf-orange-area').toggle();
    tmrShowHide = setTimeout(divShowHide, 10000);
}

$(function() {
    $(document).on('click', '.dab, .pfs', divShowHide);
    tmrShowHide = setTimeout(divShowHide, 10000);
})

---

---

---

下一个示例要短得多，因为它不会重置计时器，因此，单击类元素以进行更改将不会阻止其每10秒更改一次。

示例2

function divShowHide(e) {  //  this will be the method used to change the colors
    //  the .toggle method will simply toggle the visible state (display in css) of the element it's called upon
    //  so if we start with one hidden and one visible, then this is all that is needed to make the change!
    //  also note that i'm calling both elements at once, as they'll both undergo the "toggle" change
    $('#pf-blue-area, #pf-orange-area').toggle();
}

$(function() {  //  Same as $(document).ready(function() { // just shorter!
    //  the following establishes our click event on the 2 class types
    $(document).on('click', '.dab, .pfs', divShowHide);
    //  this will begin the unstoppable 10 second timer
    setInterval(divShowHide, 10000);
})

所以没有注释的话，它就很简单：

function divShowHide(e) {  $('#pf-blue-area, #pf-orange-area').toggle();  }

$(function() {
    $(document).on('click', '.dab, .pfs', divShowHide);
    setInterval(divShowHide, 10000);
})

闪烁者！（_{只是为了好玩}）

- SpYk3HH