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

问题是因为您正在使用箭头函数，因此.item的上下文仍在外部范围内，而不是引发事件的$('.item').on('click', function(e) { $('.item > .comment').slideUp(200); $(this).find('.comment').slideToggle(200); });元素。如果您想要这种行为，请使用传统功能：

getUserMedia

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

尝试：

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

希望这个帮助

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

3 个答案: