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是无关紧要的......你不需要它们。

一页上有多个Jquery简单滑块

1 个答案: