Как обратиться к конкретному элементу и добавлять класс к другому конкретному элементу (js, jQuery)

Question

Есть такая структура которая динамически выводится на страницу

<div class="block">
    <div class="1"></div>
    <div class="2"></div>
</div>
<div class="block">
    <div class="1"></div>
    <div class="2"></div>
</div>

Как сделать, чтобы при клике на конкретный div class="1" добавлялся класс 'show' у конкретного блока div class="2" внутри того же div class="block" и убирался при повторном клике div class="1" Но при этом чтобы других идентичных блоках ничего не добавлялось.

При использовании такого кода класс 'show' добавляется ко все div class="2", а нужно чтобы добавлялся только к конкретному

jQuery(document).ready(function($) {
    $('.1').click(function(event) {
        $('.2').toggleClass('show');
    });
});

Answer 1

предлагаю для этого клик установить на блок ".block" а с помощью метод find() найти нужного потомка и его скрывать, для вашей ситуации можно использовать еще .children()

jQuery метод .find() возвращает потомков каждого элемента в текущем наборе совпавших элементов, отфильтрованных селектором, объектом jQuery, или элементом.

Пример:

jQuery(document).ready(function($) {

  $(".block").click(function() {
    $(this).find(".2").toggle();
    console.log($(".block"))
  });

});

.show {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block">
  <div class="1">1</div>
  <div class="2">1111</div>
</div>
<div class="block">
  <div class="1">2</div>
  <div class="2">2222</div>
</div>

P.S: по замечанию Pavel Nazarian, вопрос именно в клике на блок class="1"

Тогда можно так сделать:

jQuery(document).ready(function($) {

  $(".1").click(function() {
    $(this).next().toggle() // находим соседний элемент и добавляем/удаляем класс
  });

});

.show {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block">
  <div class="1">1</div>
  <div class="2">11</div>
</div>
<div class="block">
  <div class="1">2</div>
  <div class="2">22</div>
</div>

Answer 2

На JS это можно сделать вот так:

const blk = document.getElementsByClassName('block');

for (let item of blk) {
  item.addEventListener('click', e => {
    if (e.target.classList.contains('1')) {
      if (e.target.nextSibling.nextSibling.style.display == 'none') {
        e.target.nextSibling.nextSibling.style.display = 'block';
      } else {
        e.target.nextSibling.nextSibling.style.display = 'none';
      }

    }
  });
}

.block>div {
  background-color: green;
  color: white;
  width: 35px;
  padding: 10px;
}

<div class="block">
  <div class="1">div 1</div>
  <div class="2">div 2</div>
</div>
<div class="block">
  <div class="1">div 1</div>
  <div class="2">div 2</div>
</div>

БЛОГ НА HUSL

Как обратиться к конкретному элементу и добавлять класс к другому конкретному элементу (js, jQuery)

Ответы (2 шт):