Jquery slideToggle 不能与 $(this).find 一起使用答案

【问题标题】：Jquery slideToggle can't work with $(this).findJquery slideToggle 不能与 $(this).find 一起使用
【发布时间】：2018-01-04 11:36:23
【问题描述】：

我想在每次单击“.item”元素时选择子“.comment”元素滑动切换它。 html代码：

<div class="row col-md-12 item">
  <div class="col-md-4">Name</div>
  <div class="col-md-4">degree of usage</div>
  <div class="col-md-4">price</div>
  <div class="col-md-12 comment">comment</div>
</div>

js代码

$('.item').on('click', (event) => {
  $('.item > .comment').slideUp(200);
  $(this).find('.comment').slideToggle(200);
});

看来slideUp效果可以正常工作，但是$(this).find无法捕捉到里面的'.comment'元素。

【问题讨论】：

箭头函数没有自己的this。 $('.item').on('click', function(event) 会起作用。
如果你想使用箭头函数，只需使用：$(event.currentTarget) 而不是$(this)

标签： javascript jquery

【解决方案1】：

问题是因为您使用的是箭头函数，因此 this 的上下文仍然在外部范围内，而不是引发事件的 .item 元素。如果您想要这种行为，请改用传统函数：

$('.item').on('click', function(e) {
  $('.item > .comment').slideUp(200);
  $(this).find('.comment').slideToggle(200);
});

【讨论】：

是的，就是这样。我没有注意到。非常感谢。

【解决方案2】：

你只需要在你的 js 代码中加入一个函数。我也刚刚注释掉了 slideUp，因为 slideToggle 函数将覆盖它。见下文：

 $('#item').on('click', function(event) {
   //$('.item > .comment').slideUp(200);
   $(this).find('.comment').slideToggle(200);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row col-md-12 item" id="item">
      <div class="col-md-4">Name</div>
      <div class="col-md-4">degree of usage</div>
      <div class="col-md-4">price</div>
      <div class="col-md-12 comment">comment</div>
    </div>

【讨论】：

【解决方案3】：

尝试：

$('.item > .comment').slideUp(200);
$('.item').on('click', function(e) {
  $(this).find('.comment').slideToggle(200);
});

希望得到帮助

【讨论】：

如果您将slideUp() 移到事件处理程序之外，当打开一个新事件处理程序时它们不会关闭