Question

此刻，我正在为不同的元素设置动画。具体来说，是在按下按钮时出现的屏幕外导航栏。我最初是用jQuery编写的，因为那是我当时所学的，并且效果很好，但是现在希望用香草JS重写它，似乎无法使其正常工作。

这是jQuery代码：

 $(document).ready(function(){
     $('#hambBtn').click(function(){
       $('#hambBtn span').toggleClass('active')
       $('#menuWrapper').toggleClass('active')
     })
 })

到目前为止，香草JS看起来像这样：

      const hamb-btn = document.querySelector("#hambBtn");

      hamb-btn.addEventListener("click", animateHamb);

      function animateHamb(){
          const hambSpan = document.querySelector(".hamb-btn");
          const menuWrap = document.querySelector("#menuWrapper");
          hambSpan.classList.toggle("active");
          menuWrap.classList.toggle("active");
      }

有人能解释一下jQuery代码是否正在执行香草JS没做的任何事情，以便我可以更正吗？

Answer 1

您已经正确转换了一些代码，但是您刚刚创建了一个函数，而JQuery设置了一个函数，以便在加载DOM时自动调用该函数。用于行转换的更精确的行是：

document.addEventListener("DOMContentLoaded", function(){
  document.getElementById('hambBtn').addEventListener("click", function(){
    document.querySelector('#hambBtn span').classList.toggle('active');
    document.getElementById('menuWrapper').classList.toggle('active');
  });
});

将jQuery转换为Vanilla JS时遇到问题

1 个答案: