JQuery onClick 用类激活页面上的每个元素答案

【问题标题】：JQuery onClick activating every element on page with classJQuery onClick 用类激活页面上的每个元素
【发布时间】：2018-06-22 04:21:14
【问题描述】：

我的 HTML 页面上有一个元素：

<div class="edit-post">
    <input type="image" src="static/media/icons/expand_plus.png" class="expand-post-menu"/>
    <div class="edit-tools">
        <a class="edit-tool-btn" href="/edit/{{ post.post_id }}">Edit</a>
        <a class="edit-tool-btn" href="/delete/{{ post.post_id }}">Delete</a>
    </div>
</div>

这将在页面上重复多次。

我的 JQuery onClick 函数：

$(".expand-post-menu").click(function() {
  $(".edit-tools").slideToggle("slow");
});

现在我的问题是，每次我激活任何 .expand-post-menu 按钮时，都会在每个具有 .edit-tools 类的元素上调用 slideToggle 函数。我怎样才能使它只有被点击的按钮的元素被激活？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

使用this 上下文来判断点击了哪个展开元素
使用.next()获取正确的编辑div

$(".expand-post-menu").click(function() {
  $(this).next(".edit-tools").slideToggle("slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit-post">
  <input type="image" src="static/media/icons/expand_plus.png" class="expand-post-menu" />
  <div class="edit-tools">
    <a class="edit-tool-btn" href="/edit/{{ post.post_id }}">Edit</a>
    <a class="edit-tool-btn" href="/delete/{{ post.post_id }}">Delete</a>
  </div>
</div>


<div class="edit-post">
  <input type="image" src="static/media/icons/expand_plus.png" class="expand-post-menu" />
  <div class="edit-tools">
    <a class="edit-tool-btn" href="/edit/{{ post.post_id }}">Edit</a>
    <a class="edit-tool-btn" href="/delete/{{ post.post_id }}">Delete</a>
  </div>
</div>

【讨论】：

【解决方案2】：

使用this 引用被点击的元素，并从中导航到.edit-tools：

$(".expand-post-menu").click(function() {
  $(this).next().slideToggle("slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit-post">
  <input type="image" src="static/media/icons/expand_plus.png" class="expand-post-menu" />
  <div class="edit-tools">
    <a class="edit-tool-btn" href="/edit/{{ post.post_id }}">Edit</a>
    <a class="edit-tool-btn" href="/delete/{{ post.post_id }}">Delete</a>
  </div>
</div>

【讨论】：