一页上有多个 Jquery 简单滑块

Question

我创建了我的第一个 Jquery 内容滑块（点 + 幻灯片）。它工作正常，但我不能在一页中实现两个滑块。 如何在两个 id 上调用函数？ 我刚开始学习 JS，所以我只需要两个滑块都可以工作，而不是让它们变得更好等等。 谢谢

<div class="slider"  id="slider">
    <div class="slides">
                 <!-- ... -->
    </div>
</div>

<div class="slider"  id="slider2">
    <div class="slides">
                    <!-- ... -->
    </div>
</div>

JS

(function($) {
    $.fn.slajder = function() {
        return this.each(function() {

    slider = $(this);
    slider.prepend('<nav class=\"dots"><span></span><span></span></nav>');

    slides = slider.children(".slides");
    dots = slider.children(".dots");
    dot = dots.children("span");
    dot1 = dots.children("span:first-child");
    dot2 = dots.children("span:nth-child(2)");

    dot1.click(function(){
        slides.animate({
            top: '10px',
        }, 600, function() {
        // Animation complete.

        });
        dot.css("-webkit-box-shadow","#444 0 1px 1px 0px");
        $(this).css("-webkit-box-shadow","#444 0 -1px 1px 0px");
    });
    dot2.click(function(){
        slides.animate({
            top: '-130px',
        }, 600, function() {
        // Animation complete.

        });
        dot.css("-webkit-box-shadow","#444 0 1px 1px 0px");
        $(this).css("-webkit-box-shadow","#444 0 -1px 1px 0px");
    });


        });
    };
}(jQuery));

// this one goes at bottom of a page in script tags
$(document).ready(function() {
 $('#slider').slajder();
});

和小提琴 - http://jsfiddle.net/lima_fil/CK2jS/

Answer 1

第一件事。要将此代码应用于两个命名的滑块 div，您可以这样做：

$(document).ready(function() {
    $('#slider').slajder();
    $('#slider2').slajder();
});

因此，您将滑块功能分别放在两个块中的每一个上。

（gillyspy 的单行方式更好；我分开做只是因为它使概念更明显）

在你的小提琴中先尝试一下。它不会完全起作用，但它会以一种有趣的方式失败，所以继续看看吧。

这些按钮都影响了第二个区块。要了解原因，您需要了解 Javascript 中变量的作用域。 （那里有很多解释；一个是http://www.digital-web.com/articles/scope_in_javascript/）。然而，这里的简单解释是隐式声明的变量具有全局范围。这意味着当您将 slajder 函数应用于第二个块时，其中隐式声明的变量是全局变量，并覆盖了为第一个块声明的（全局）变量。

解决方案是用 'var' 声明它们，因此它们将是本地的：

var slides = slider.children(".slides");
var dots = slider.children(".dots");
var dot = dots.children("span");
var dot1 = dots.children("span:first-child");
var dot2 = dots.children("span:nth-child(2)");

正如您似乎已经意识到的那样，小提琴中的 dot3 和 dot4 是无关紧要的……您不需要它们。