Jquery slideToggle失效：$(this).find无法获取子元素.comment的问题

嘿，这个问题我之前踩过坑！核心问题出在你用了箭头函数作为点击事件的处理函数——箭头函数不会绑定自己的this上下文，它会直接继承外层作用域的this，所以这里的$(this)根本不是你点击的那个.item元素，自然找不到对应的.comment子元素啦。

给你两种简单的修复方案：

方案1：换成普通函数（最常用） #

把箭头函数改成普通函数，这样this就会自动指向触发点击事件的.item元素：

$('.item').on('click', function(event) { 
  // 收起所有.item下的comment
  $('.item > .comment').slideUp(200); 
  // 切换当前点击的.item下的comment显示状态
  $(this).find('.comment').slideToggle(200); 
});

方案2：用事件对象的currentTarget（保留箭头函数时用） #

如果因为某些原因必须用箭头函数（比如需要访问外层作用域的变量），可以通过event.currentTarget获取触发事件的元素，它的作用和普通函数里的this一致：

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

两种方案都能解决你的问题，选哪种取决于你的代码场景~

内容的提问来源于stack exchange，提问作者Philipl