Javascript 如何分别为多个元素运行jQuery函数？

我无法使jQuery函数在单个元素上工作。我的功能是一个滑块。当我在html中添加一个滑块时，它工作正常，没有问题。但每当我尝试放置第二个滑块时，它都无法正常工作。第一个滑块控制两个，然后第二个滑块承担责任，如果我点击右箭头太多等

以下是我的jQuery代码：

这就是我使用它的地方：

<style>
.slide {
    display:none;
}
.slide.active {
    display:block;
}
</style>

<div class="slider-container">
  <div id="slider1">
    <div class="slide active">#1</div>
    <div class="slide">#2</div>
    <div class="slide">#3</div>
  </div>
  <p class="left-arrow"><</p>
  <p class="right-arrow">></p>
</div>

<div class="slider-container">
  <div id="slider2">
    <div class="slide active">#a</div>
    <div class="slide">#b</div>
    <div class="slide">#c</div>
  </div>
  <p class="left-arrow"><</p>
  <p class="right-arrow">></p>
</div>

---

正如我前面所说，当我单击第一个滑块的右箭头时，第一个滑块的2和第二个滑块的b会显示出来。

由于线条的原因，您会出现这种行为

var currentSlide = $('.slide.active');

它选择类处于滑动和活动状态的所有元素。尝试将该行替换为以下内容：

var currentSlide = $(this).parent().find('.slide.active');

这样做的目的是选择在$this上触发事件的元素。然后获取该元素的父元素，然后在该元素中查找活动幻灯片

编辑 下面是第一个if语句的示例。再次，您将获得导致事件的元素的父元素，然后在该dom元素中搜索具有“slide”类的所有元素

作为补充说明，您可能希望将$this设置为类似var$this=$this的变量。然后使用$this而不是$this。这是一个性能问题，您可能关心也可能不关心

if (nextSlide.length == 0) {
    $(this).parent().find('.slide').first().fadeIn(300).addClass('active');

}

---

正如前面提到的其他答案和注释一样，您正在搜索整个文档中的.slide元素。相反，您需要将搜索限制在相关的.slider容器元素内。为此，您可以使用。另外，在显示新的.slide元素之前，最好等待淡出动画使用回调函数完成。您可以以下一个示例作为实施的参考：

$'。右箭头。单击函数 { var container=$this.closest.slider-container； var currside=container.find'.slide.active'； var nextSlide=currside.next.slide； 如果nextSlide.length==0 nextSlide=container.find'.slide:first child'； currSlide.fadeOut300，功能 { $this.removeClass'active'； nextSlide.fadeIn300.addClass'active'； }; }; $'。左箭头。单击函数 { var container=$this.closest.slider-container； var currside=container.find'.slide.active'； var prevSlide=currSlide.prev.slide； 如果prevSlide.length==0 prevSlide=container.find'.slide:last child'； currSlide.fadeOut300，功能 { $this.removeClass'active'； prevsiled.fadeIn300.addClass'active'； }; }; .幻灯片{ 显示：无； } .slide.active{ 显示：块； } 1. 2. 3.

A. B C

---

今天早些时候，这里回答了一个几乎重复的情况。您当前的幻灯片选择器搜索整个文档，您必须将其限制在单击箭头的滑块容器中。只是一个OT通知：现在它在您的简历上显示为Write APS.Net，我想它应该是ASP.Net，对吗？：-。回答得好。@Sascham78啊，糟糕的拼写错误，我会马上纠正的！它几乎解决了我的问题。你能告诉我如何在if语句上实现这个解决方案吗？@phishfordead解决了我所有的问题。谢谢@我很高兴能为你效劳。你会在邮件中收到发票：-祝你好运！

if (nextSlide.length == 0) {
    $(this).parent().find('.slide').first().fadeIn(300).addClass('active');

}