仅针对特定类的一个元素的 JQuery 事件

【问题标题】：JQuery event for only one element of a specific class仅针对特定类的一个元素的 JQuery 事件
【发布时间】：2019-05-31 09:56:01
【问题描述】：

我是 jQuery 新手，似乎无法自己解决这个问题。

问题是，当我按下具有相同类的一个元素 (div) 时，所有其他元素也会打开。这是一个显示问题的 gif。 - 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();
    })
})

【问题讨论】：

您可能希望使用 id 来引用单个元素，而不是使用类
@Mike 在像 OP 这样的反模式的情况下
@RoryMcCrossan 啊，我明白了。您的解决方案要好得多

标签： jquery class events element

【解决方案1】：

问题是因为您选择了点击处理程序中的所有 .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>

【讨论】：