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

问题描述

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

 < div class =sliderid =slider> 
< div class =slides> 
<！ -  ...  - > 
< / div> 
< / div> 
 
< div class =sliderid =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（）{
 //动画完成。
 
））; 
 dot.css（ -  webkit-box-shadow，＃444 0 1px 1px 0px）; 
 $（this）.css（ -  webkit- ）; 
 dot2.click（function（）{
 slides.animate（{
 top：{
 top： '-130px'，
 }，600，function（）{
 //动画完成。 
 
}）; 
 dot.css（ -  webkit-box-shadow，＃444 0 1px 1px 0px）; 
 $（this）.css（ -  webkit-box-shadow，＃444 0 -1px 1px 0px）; 
}）; 
 
 
}）; 
}; 
}（jQuery））; 
 
 //这个在脚本标记的页面底部
 $（document）.ready（function（）{
 $（'＃slider'）。slajder（ ）; 
}）; 
  

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

解决方案

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

  $（document）.ready（function（）{ 
 $（'＃slider'）。slajder（）; 
 $（'＃slider2'）。slajder（）; 
}）; 
  

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

（gillyspy做这件事的一种方式更好;我分别做了它们只是因为它使这个概念更加明显）

<先在你的小提琴中尝试一下。它不会工作，但它会以一种有趣的方式失败，所以继续前进，看看它。

这些按钮都影响第二块。要理解为什么，您需要了解Javascript中变量的范围。 （这里有很多解释，一个是 http://www.digital-web.com /用品/ 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，你似乎已经意识到，是无关的......你不需要它们。

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();
});

And fiddle - http://jsfiddle.net/lima_fil/CK2jS/

解决方案

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'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.

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.

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 and dot4 in the fiddle, as you seem to have already realized, are extraneous...you don't need them.

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