Question

我的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函数。我该如何做才能仅激活单击按钮的元素？

Answer 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>

Answer 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>

jQuery onClick使用类激活页面上的每个元素

2 个答案: