是否可以将hasClass()与querySelectorAll()搭配使用？

报错原因 #

• hasClass()是jQuery对象专属方法，document.querySelectorAll()返回的是原生DOM元素集合，内部单个元素为原生DOM节点，本身没有hasClass方法，直接调用会触发报错。
• 你编写的第二段代码还存在两处逻辑问题：一是判断条件中直接对集合x调用hasClass，没有定位到单个元素；二是操作.fas类元素时仍全局选中所有对应元素，依旧无法实现仅修改当前点击元素关联样式的需求。

可用解决方案 #

方案1：纯jQuery实现（适配你的使用场景，代码最简洁） #

直接绑定点击事件，通过$(this)获取当前被点击的.head元素，再查找其内部关联的.fas元素做类操作即可：

$(".head").click(function() {
  const $currentHead = $(this);
  const $currentFas = $currentHead.find(".fas");
  if ($currentHead.hasClass("collapsed")) {
    $currentFas.addClass("fa-chevron-down").removeClass("fa-chevron-up");
  } else {
    $currentFas.addClass("fa-chevron-up").removeClass("fa-chevron-down");
  }
})

方案2：原生DOM与jQuery混用（需保留querySelectorAll用法时可选） #

将获取到的原生DOM节点用$()包裹转换为jQuery对象，即可正常调用hasClass方法，同时注意仅操作当前元素关联的.fas节点：

document.querySelectorAll(".head").forEach(headEl => {
  headEl.addEventListener('click', function() {
    const $currentHead = $(this);
    const $currentFas = $currentHead.find(".fas");
    if ($currentHead.hasClass("collapsed")) {
      $currentFas.addClass("fa-chevron-down").removeClass("fa-chevron-up");
    } else {
      $currentFas.addClass("fa-chevron-up").removeClass("fa-chevron-down");
    }
  })
})

方案3：纯原生实现（无需依赖jQuery） #

使用原生classList提供的contains、add、remove方法即可实现同等功能：

document.querySelectorAll(".head").forEach(headEl => {
  headEl.addEventListener('click', function() {
    const currentFas = this.querySelector(".fas");
    if (this.classList.contains("collapsed")) {
      currentFas.classList.add("fa-chevron-down");
      currentFas.classList.remove("fa-chevron-up");
    } else {
      currentFas.classList.add("fa-chevron-up");
      currentFas.classList.remove("fa-chevron-down");
    }
  })
})

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