一页上有多个 Jquery 简单滑块 [英] Multiple Jquery simple sliders on one page

问题描述

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

I created my first Jquery content slider (dots + slides). It works fine, but I cant implement two sliders in one page. How to call function on two ids? I just started learning JS, so I just need both sliders to work, not to make them better etc. Thanks

<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/

推荐答案

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

First thing first. To apply this code to both named slider divs, you can do this:

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

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

Thus, you're putting the slider functionality onto each of the two blocks, separately.

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

(gillyspy's one-line way of doing this is better; I did them separately only because it makes the concept more obvious)

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

Try that first in your fiddle. It won't quite work, but it will fail in an interesting way, so go ahead and look at it.

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

The buttons were all affecting the second block. To understand why, you need to know about the scoping of variables in Javascript. (There are lots of explanations out there; one is http://www.digital-web.com/articles/scope_in_javascript/). The simple explanation here, however, is that variables that are implicitly declared have global scope. That means that when you applied the slajder function to the second block, the implicitly declared variables inside it were global and overwrote the (global) ones declared for the first block.

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

The solution is to declare them with 'var', so they'll be local:

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

dot3 and dot4 in the fiddle, as you seem to have already realized, are extraneous...you don't need them.

这篇关于一页上有多个 Jquery 简单滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！