一个页面上有多个Jquery简单滑块

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

JS

（函数（$）{
$.fn.slajder=函数（）{
返回此值。每个（函数（）{
滑块=$（此）；
滑块。前置（“”）；
slides=slider.children（“.slides”）；
点=滑块。子项（“.点”）；
点=点。儿童（“span”）；
dot1=dots.children（“跨度：第一个孩子”）；
dot2=dots.children（“span:n个children（2）”）；
dot1.单击（函数（）{
幻灯片。动画({
顶部：“10px”，
}，600，函数（）{
//动画完成。
});
css（“-webkit-box-shadow”，“#444 0 1px 1px 0px”）；
$（this.css（“-webkit-box-shadow”，“#444 0-1px 1px 0px”）；
});
dot2.单击（函数（）{
幻灯片。动画({
顶部：'-130px'，
}，600，函数（）{
//动画完成。
});
css（“-webkit-box-shadow”，“#444 0 1px 1px 0px”）；
$（this.css（“-webkit-box-shadow”，“#444 0-1px 1px 0px”）；
});
});
};
}（jQuery））；
//这一个在脚本标记的页面底部
$（文档）.ready（函数（）{
$（“#滑块”）.slajder（）；
});

---

和小提琴-

第一件事。要将此代码应用于两个命名滑块div，可以执行以下操作：

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

因此，将滑块功能分别放在两个块上

（gillyspy的单线方法更好；我单独做了这些，只是因为它使概念更加明显）

先试试你的小提琴。它不太管用，但会以一种有趣的方式失败，所以继续看吧

这些按钮都影响到了第二个街区。要理解原因，您需要了解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是无关的……您不需要它们。

常用的选择器是类“slider”，所以

$（'.slider'）.slajder（）感谢您提供的资源和帮助。
$(document).ready(function() {
    $('#slider').slajder();
    $('#slider2').slajder();
});

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)");