Javascript在相同的div id中淡出两个框

Question

我无法更改div输出，我有这个js但这只加载第二个div： [代码]

   var next = null;
    var outer = jQuery('#wp_bannerize-2 > #banners');
    var current = outer.find('.box:first');
    current.fadeIn();
    function fade() {
        if (current.next('div.box').length > 0) {
            next = current.next('div.box');
        } else {
            next = outer.find('.box:first');
        }

        current.fadeOut();
        next.fadeIn();
        current = next;
        setTimeout(fade, 1000); //5secondi
    }
    // start the process
    fade();


  var next = null;
    var outer = jQuery('#wp_bannerize-3 > #banners');
    var current = outer.find('.box:first');
    current.fadeIn();
    function fade() {
        if (current.next('div.box').length > 0) {
            next = current.next('div.box');
        } else {
            next = outer.find('.box:first');
        }

        current.fadeOut();
        next.fadeIn();
        current = next;
        setTimeout(fade, 1000); //5secondi
    }
    // start the process
    fade();

[/代码] 我怎么解决呢？我想我会替换js var next和var next2。 现场：http://jsfiddle.net/EmQmL/2/

Answer 1

我不确定你这样做的目的是什么。您的代码中有如此多的重复变量声明。因此，它无法正常工作。更新您的代码，如下所示，它将工作。但我不能说这是完美的答案。暂时你可以使用它。

      var next1 = null;
    var outer1 = jQuery('#wp_bannerize-2 > #banners');
    var current1 = outer1.find('.box:first');
    current1.fadeIn();
    function fade1() {
        if (current1.next('div.box').length > 0) {
            next1 = current1.next('div.box');
        } else {
            next1 = outer1.find('.box:first');
        }

        current1.fadeOut();
        next1.fadeIn();
        current1 = next1;
        setTimeout(fade1, 1000); //5secondi
    }
    // start the process
    fade1();


  var next = null;
    var outer = jQuery('#wp_bannerize-3 > #banners');
    var current = outer.find('.box:first');
    current.fadeIn();
    function fade() {
        if (current.next('div.box').length > 0) {
            next = current.next('div.box');
        } else {
            next = outer.find('.box:first');
        }

        current.fadeOut();
        next.fadeIn();
        current = next;
        setTimeout(fade, 1000); //5secondi
    }
    // start the process
    fade();

JSFIDDLE