Событие JQuery только для одного элемента определенного класса - PullRequest
Новая
       9

Событие JQuery только для одного элемента определенного класса

2 голосов
/ 31 мая 2019

Я новичок в jQuery и не могу понять, как решить эту проблему самостоятельно.

Проблема в том, что когда я нажимаю на один элемент (div) с одним и тем же классом, вседругие тоже открыты.Вот рисунок, который показывает проблему.- https://gyazo.com/8315d69878d7e5efb5a699798343b278

      <div class="middle-side">
        <div class="items"><img src="img/services/1.jpg" alt="">
          <div class="blue-img"></div>
        </div>
        <div class="items"><img src="img/services/2.jpg" alt="">
          <div class="blue-img"></div>
        </div>
        <div class="items"><img src="img/services/3.jpg" alt="">
          <div class="blue-img"></div>
        </div>
      </div>

$(document).ready(() => {
    $('.items').on('click', () => {
        $('.blue-img').slideToggle();
    })
})

1 Ответ

1 голос
/ 31 мая 2019

Проблема в том, что вы выбираете все элементы .blue-img в обработчике кликов.

Чтобы исправить это, используйте ключевое слово this для ссылки на элемент .items, по которому щелкнули, затем find() div внутри него. Попробуйте это: 

$(document).ready(() => {
  $('.items').on('click', (e) => {
    $(e.target).find('.blue-img').slideToggle();
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="middle-side">
  <div class="items">
    A
    <img src="img/services/1.jpg" alt="">
    <div class="blue-img">Blue-img A</div>
  </div>
  <div class="items">
    B
    <img src="img/services/2.jpg" alt="">
    <div class="blue-img">Blue-img B</div>
  </div>
  <div class="items">
    C
    <img src="img/services/3.jpg" alt="">
    <div class="blue-img">Blue-img C</div>
  </div>
</div>
...