隐藏和显示 div

Question

我有一个脚本，当这样写时工作正常：

var isPaused = false,
jQuery(function () {
    var $els = $('div[id^=film]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    setInterval(function () {
        if (!isPaused) {
            if (len > 1) {
                $els.eq(i).fadeOut(function () {
                    i = (i + 1) % len;
                    $els.eq(i).fadeIn();
                    });
            }
        }
    }, 3500);
});

但我想添加下一个和上一个按钮，所以我重写了这样，我认为这可行。

var isPaused = false,
    $els = $('div[id^=film]'),
    i = 0,
    len = $els.length;

    $els.slice(1).hide();
    setInterval(Slide(1), 3500);

function Slide (x) {
    if (!isPaused) {
        if (len > 1) {
            $els.eq(i).fadeOut(function () {
                i = (i + x) % len;
                if (i<0) {
                    i = len;
                }
                $els.eq(i).fadeIn();
                });
        }
    }
}

$('#next').click(Slide(1));
$('#prev').click(Slide(-1));

但是这段代码只是在加载页面时显示所有 div，然后不会使它们淡入和淡出，也不会允许下一个和上一个按钮起作用。我做错了什么？

更新也许我应该换个方式问这个问题。鉴于第一块代码，我应该如何更改它以启用 Prev 和 Next 按钮？

Answer 1

您想做的事情：

$('#next').click(function(){Slide(1);});
$('#prev').click(function(){Slide(-1);});

和

setInterval(function(){Slide(1);}, 3500);

相反，与您当前的代码一样，Slide(1) 已经在计算中，点击函数将只调用它的值 returned（因为它没有 return在函数中，this不会被定义)

通过将对 Slide 的调用包装在一个函数中，这使得点击调用该函数，而该函数又调用 Slide

你还想将索引设置为 len - 1 如果你变负，而不是 len，因为你正在处理一个零索引数组：

if (i<0) {
    i = len - 1;
}

Answer 2

您 jQuery 事件回调必须在加载结构内，例如：

// Wait for DOM load
$(document).ready(function() {
  $('#next').click(function(){ Slide(1); });
  $('#prev').click(function(){ Slide(-1); });
});

我想建议您更改您的：

setInterval(Slide(1), 3500);

至

setInterval(function() { 
  Slide(1); 
}, 3500);

希望对您有所帮助

隐藏和显示 div

Hiding and revealing divs

javascript

jquery

event-handling

event-binding