Jquery slideToggle无法使用$（this）.find

Question

我想选择子'.comment'元素slideToggle它每次我点击'.item'元素。 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'元素。

Answer 1

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

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

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

Answer 3

尝试：

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

希望这个帮助