javascript - 需要帮助将 jQuery 转换为 VanillaJS

Question

$('.tabLabel').click(function() {
  if (!$(this).hasClass('activeTab')) {
    $('.tabLabel').removeClass('activeTab');
    $(this).addClass('activeTab');
    $('.tab').toggleClass('activeTabContent');
  }
});

var tabLabels = document.querySelectorAll('.tabLabel');

Array.from(tabLabels).forEach(function(tabLabel) {
  tabLabel.addEventListener('click', function(e) {
    var activeTabLabel = e.target.classList.contains("activeTab");

    if (!activeTabLabel) {
      tabLabel.classList.remove('activeTab');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="tabLabel activeTab">
    <p>Tab One</p>
  </div>
  <div class="tabLabel">
    <p>Tab Two</p>
  </div>

</div>

我有这个点击功能，在转换为“Vanilla”Js(纯js)时我有点迷失了。任何帮助，将不胜感激。到目前为止我已经尽我所能，但词汇 this 让我感到困惑。

更新:我仍然遇到麻烦，但我至少可以 console.log 我想要定位的元素。

// Working Code in jQuery
$('.tabLabel').click(function() {
  if (!$(this).hasClass('activeTab')) {
    $('.tabLabel').removeClass('activeTab');
    $(this).addClass('activeTab');
    $('.tab').toggleClass('activeTabContent');
  }
});


// My attempt at converting
// Does not work. returns err => Cannot read property 'remove' of undefined  || Cannot read property 'toggle' of undefined
var tabLabels = document.querySelectorAll('.tabLabel');
var tab = docuement.querySelectorAll('.tab');

Array.from(tabLabels).forEach(function(tabLabel) {
  tabLabel.addEventListener('click', function(e) {
    if (!this.classList.contains('activeTab')) {

      tabLabel.classList.remove('activeTab');
      this.classList.add('activeTab');
      tab.classList.toggle('activeTabContent');
    }
  });
});

Answer 1

问题:

您的代码 tabLabel.classList.remove('activeTab');不起作用，因为您在不同的范围中定义了 tabLabel 。它是在您创建点击监听器时定义的，但是点击监听器事件在触发时处于完全不同的范围，因此它最终是“未定义”的。这是你问题的根源。

“this”关键字可能很棘手，尤其是在嵌入式回调函数中，因为很容易忘记当前所处的范围。我总是发现 console.log(this) 只是为了确保它很有帮助它针对的是我想要的。

编辑-有关“this”关键字的更多信息，我建议查看此处的所有资源:

How does the "this" keyword work?

解决方案:

下面是普通 JS 代码的修改版本，可在单击时在两者之间切换 activeTab 类。

var tabLabels = document.querySelectorAll('.tabLabel');
var tabs = document.querySelectorAll('.tab');

tabLabels.forEach(function(tabLabel) {

    tabLabel.addEventListener('click', function(e) {

        if (!this.classList.contains('activeTab')) {

            tabLabels.forEach(function(tl){         
                  tl.classList.remove('activeTab');
             });      

         this.classList.add('activeTab');
         tabs.forEach(function(tab) {
             tab.classList.toggle('activeTabContent');
         }
        }
    });
});

需要注意的几点:

• 您的选项卡变量定义中有拼写错误，“文档”应为“文档”。

• 您不需要执行 Array.from(tabLabels).forEach()，querySelectorAll 已经创建了一个数组。您会看到我对此进行了修改。

编辑- 正如 Frederickf 所澄清的那样，querySelectorAll 不会创建数组，而是创建 NodeList。 https://developer.mozilla.org/en-US/docs/Web/API/NodeList

• 在将每个项目应用到单击的控件之前，我们必须再次迭代 tabLabels 数组以删除每个项目的“activeTab”类。

希望有帮助!