关于jQuery中this关键字及多元素无循环绑定点击事件的疑问

原始代码 #

$('.expandIcon').click(function(e) {
  $(this).toggleClass("bi-dash-circle bi-plus-circle");
  console.log(this);
  $(this).closest(".faq-heading").children(".faq-answer").toggleClass("d-none");
})

一、为什么不用循环就能处理多个.expandIcon元素？ #

• jQuery的选择器$('.expandIcon')会一次性选中页面中所有带有expandIcon类的元素，返回一个包含这些元素的jQuery集合对象
• 当你调用.click()方法绑定事件时，jQuery内部会自动遍历这个集合里的每一个元素，为每个元素单独绑定点击事件处理函数
• 也就是说，你写的这个处理函数会被复制一份，分别绑定到每个匹配的元素上，不需要手动写for/forEach循环来逐个绑定

二、this关键字的作用 #

• 在这个点击事件处理函数中，this指向的是当前被用户点击的那个原生DOM元素（注意：不是jQuery对象，是浏览器原生的Element节点）
• 用$(this)可以把这个原生DOM元素转换成jQuery对象，这样就能调用jQuery的方法（比如toggleClass、closest）
• 举个例子：当你点击页面中第二个.expandIcon时，this就是第二个对应的DOM节点，$(this)就只操作这个元素，切换它的图标类，再通过closest找到它所在的.faq-heading，进而控制对应的.faq-answer显示/隐藏，不会影响其他.expandIcon和对应的问答模块

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