Question

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

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

<article>
  <div class="hotspot">
    <div class="hotspot">
</article>

<article>
  <div class="hotspot">
    <div class="hotspot">
</article>

您有什么建议吗？

Answer 1

如果删除.each()循环，将解决主要问题，请查看下面的说明。

说明：

由于您使用.each()方法循环播放，因此在每次迭代中都将附加事件，在您的情况下，您将拥有两个article's，因此该事件将被附加到每个项目两次，然后它将触发touchstart时会被触发两次。

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

$("article .hotspot").on("touchstart click", function() {
  $(this).parent().find(".hotspot.visible").not(this).removeClass('visible');
  $(this).toggleClass('visible');
});

.visible {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
  <div class="hotspot">1</div>
  <div class="hotspot">2</div>
</article>
<br>
<article>
  <div class="hotspot">1</div>
  <div class="hotspot">2</div>
</article>

注意：要检查我已经解释过的行为，您可以看到事件内部的console.log('Event fired')是单击两次触发的。

$("article").each(function() {
  $("article .hotspot").on("touchstart click", function() {
    $(".hotspot.visible").not(this).removeClass('visible');
    $(this).toggleClass('visible');

    console.log('Event fired');
  })
})

.visible {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
  <div class="hotspot">1</div>
  <div class="hotspot">2</div>
</article>

<article>
  <div class="hotspot">1</div>
  <div class="hotspot">2</div>
</article>

Answer 2

这应该对您有用

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

或

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

Answer 3

您在这里：

$("article").each(function() {
   $(this).children('.hotspot').on("touchstart click", function(){
       $(this).siblings().removeClass('active');
       $(this).addClass('active');     
   })
})

article .hotspot.active{
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<article>
  <div class="hotspot">1</div>
 <div class="hotspot">2</div>
</article>
<br>
<article>
 <div class="hotspot">1</div>
 <div class="hotspot">2</div>
</article>

如果要选择多个活动热点，请删除：

$(this).siblings().removeClass('active');

并更改：

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

为

$(this).toggleClass('active');

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

3 个答案: