Как применить функцию jquery для каждой статьи

Question

У меня есть DOM-подобное.У меня есть функция jquery, которая проверяет, есть ли класс «видимый» в статье, удаляет его и добавляет его в класс «горячей точки», по которому щелкнули.Эта функция должна работать для каждой «статьи» независимо от других.Я создаю эту функцию, но она не работает:

$("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

это должно работать для вас

$("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 2

Вот, пожалуйста:

$("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');

Answer 3

Основная проблема будет решена, если вы удалите цикл .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>