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）时有点迷失。任何帮助，将不胜感激。到目前为止，我已经尝试过了，但是这个词汇让我感到困惑。

更新：我仍然遇到麻烦，但我至少可以在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?

解决方案：

以下是您的vanilla 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');
         }
        }
    });
});

有几点需要注意：

您的标签变量定义中有拼写错误，'docuement'应该是'文档'。
您不需要执行Array.from（tabLabels）.forEach（），querySelectorAll已经创建了一个数组。你会看到我修改了它。

编辑 - 当frederickf澄清时，querySelectorAll不会创建数组，而是创建NodeList。 https://developer.mozilla.org/en-US/docs/Web/API/NodeList

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

希望有所帮助！

需要帮助将jQuery转换为VanillaJS

1 个答案: