JQuery函数影响页面的所有元素

Question

我制作了一个脚本，在组(幻灯片容器)的元素之间切换(点击时)一个类，效果很好。由于我有多个容器具有相同的类，所以所有元素都会受到影响。我只需要针对属于此幻灯片容器的已单击元素。不是其他幻灯片容器

这是我的代码：

$(document).ready(function() {
function activeSlide() {
$("a.slide.active").not(this).removeClass("active");
$(this).toggleClass("active");
}
$("a.slide").on("click", activeSlide);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>Test custom slider</h1>
<div class="slide-container">
<a href="#" class="slide active">
<img src="patio-estrie-1.jpeg" alt="">
</a>
<a href="#" class="slide">
<img src="patio-estrie-2.jpeg" alt="">
</a>
<a href="#" class="slide">
<img src="patio-estrie-1.jpeg" alt="">
</a>
<a href="#" class="slide">
<img src="patio-estrie-2.jpeg" alt="">
</a>
</div>
<div class="slide-container">
<a href="#" class="slide active">
<img src="patio-estrie-1.jpeg" alt="">
</a>
<a href="#" class="slide">
<img src="patio-estrie-2.jpeg" alt="">
</a>
<a href="#" class="slide">
<img src="patio-estrie-1.jpeg" alt="">
</a>
<a href="#" class="slide">
<img src="patio-estrie-2.jpeg" alt="">
</a>
</div>
</div>

Answer 1

而不是

$("a.slide.active").not(this).removeClass("active");

您可以在当前容器中找到.slide元素：

$(this).closest(".slide-container").find("a.slide").removeClass("active");

这只会影响相关容器。然后，您可以使用.addClass()而不是.toggleClass()，因为您知道当前单击的元素是要激活的元素：

$(this).addClass("active");

如果意图是允许；活动的"；元素，这样所有元素都可以被去激活，然后您自己的逻辑可以适应它。关键是找到容器的.closest()。

Answer 2

$("a.slide").click(function(){
let id = $(this).parent().attr('id');
$("#"+id+" a.slide.active").removeClass('active');
$(this).addClass('active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h1>Test custom slider</h1>
<div class="slide-container" id="slide1">
<a href="#" class="slide active">
<img src="patio-estrie-1.jpeg" alt="">
</a>
<a href="#" class="slide">
<img src="patio-estrie-2.jpeg" alt="">
</a>
<a href="#" class="slide">
<img src="patio-estrie-1.jpeg" alt="">
</a>
<a href="#" class="slide">
<img src="patio-estrie-2.jpeg" alt="">
</a>
</div>
<div class="slide-container" id="slide2">
<a href="#" class="slide active">
<img src="patio-estrie-1.jpeg" alt="">
</a>
<a href="#" class="slide">
<img src="patio-estrie-2.jpeg" alt="">
</a>
<a href="#" class="slide">
<img src="patio-estrie-1.jpeg" alt="">
</a>
<a href="#" class="slide">
<img src="patio-estrie-2.jpeg" alt="">
</a>
</div>
</div>

你应该把id放在"；滑块"；divs。这样你就可以把两者分开。您可以使用我添加的javascript代码运行它。