Javascript 如何为每篇文章应用jquery函数

我有一个像这样的DOM。我有一个jquery函数，它检查文章中是否有“可见”的类，将其删除并添加到单击的“热点”类中。此功能必须独立于其他“项目”为每个“项目”工作。我创建了此函数，但它不起作用：

$（“文章”）。每个（函数（）{
$（“article.hotspot”）。在（“touchstart”，函数（）上{
$（“.hotspot.visible”）.not（this.removeClass（'visible'）；
$（this.toggleClass（'visible'）；
})
})

---

如果删除

循环，主要问题将得到解决。请检查下面的解释

说明：

由于您使用
.each（）
方法循环，因此在每次迭代中都会附加事件，在您的案例中，您有两篇
文章
，因此事件将附加到每个项目两次，然后在触发
touchstart
时触发两次

然后，因为您使用的是
toggleClass（）
第一个事件将添加或删除该类，第二个事件将执行相反的操作，看起来该事件根本没有触发


$（“article.hotspot”）。在（“touchstart单击”，函数（）上{
$（this.parent（）.find（“.hotspot.visible”）.not（this.removeClass（'visible'）；
$（this.toggleClass（'visible'）；
});
。可见{
背景颜色：绿色；
}

1.
2.


1.
2.
这应该适合您

$("article .hotspot").on("touchstart", function() {
    $("article .hotspot").removeClass('visible');
    $(this).addClass('visible');
});

或

给你：


$（“文章”）。每个（函数（）{
$（this）.children（'.hotspot'）。打开（“touchstart单击”，函数（）{
$（this.sides（）.removeClass（'active'）；
$（this.addClass（'active'）；
})
})
article.hotspot.active{
背景：红色；
}

1.
2.


1.
2.
什么不起作用？将此
$（“article.hotspot”）
更改为
$（此）。查找（“.hotspot”）
没有理由使用.each函数here@ArunKumar恐怕它不应该改变，因为每一篇文章的功能都必须独立使用。在这种情况下，如果我在一篇文章中单击“hotspot”类，DOM中的每一篇文章都会删除这个类。我想将操作仅限于对象中的文章。它不起作用。我想背景颜色必须在第一和第二篇文章的同一时间。不仅仅是一个当您需要将活动类添加到父类时，请检查my update.Nope。我想在带有class“hotspot”的子标记上添加class。对于每一篇文章，我只想在一个“热点”子级上添加类。谢谢！！只有一个问题。你能解释一下这个代码的含义吗$（this.parent（）.find（“.hotspot.visible”）.not（this.removeClass（'visible'）；让我们。
$("article .hotspot").on("click", function() {
    $("article .hotspot").removeClass('visible');
    $(this).addClass('visible');
});