JavaScript 帮助 - 单击事件侦听器以激活 1 个元素节点并停用其他元素节点

Question

I'm stuck.我被困住了。 I'm a beginner at JavaScript and here is what I am trying to do.我是 JavaScript 的初学者，这就是我想要做的。

I'm adding a "click" eventListener to my .tab-container .我正在向我的.tab-container添加"click"事件监听器。 When I click the .tab element, it will perform event.target.matches(".tab") .当我单击.tab元素时，它将执行event.target.matches(".tab") 。

If it does match, it's going to loop through the NodeList of the .tab elements and compare them to the event.target .如果匹配，它将遍历.tab元素的 NodeList 并将它们与event.target进行比较。

The element that equals event.target will have its className updated to make it active class="tab active" .等于event.target的元素将更新其 className 以使其处于活动状态class="tab active" 。 Any other tab will have the className of class="tab" so that it is not active.任何其他选项卡都将具有class="tab"的 className，因此它不处于活动状态。

JS JS

var tabContainer = document.querySelector(".tab-container");
var tabElements = document.querySelectorAll(".tab");
var viewElements = document.querySelectorAll(".view");

var tabContainer = document.querySelector(".tab-container");
var tabElements = document.querySelectorAll(".tab");
var viewElements = document.querySelectorAll(".view");

tabContainer.addEventListener("click", function (event) {
    if (event.target.matches(".tab")) {
        for (var i = 0; i < tabElements.length; i++) {
            if (tabElements[i] === event.target) {
                event.target.className = "tab active";
            } else if (tabElements[i] !== event.target) {
                event.target.className = "tab";
            }
        }
    }
});

HTML HTML

<div class="tab-container">
    <div class="tab active" data-view="html">HTML</div>
    <div class="tab" data-view="css">CSS</div>
    <div class="tab" data-view="javascript">JavaScript</div>
</div>

Answer 1

Try this code, it should work:试试这个代码，它应该可以工作：

 var tabContainer = document.querySelector(".tab-container"); var tabElements = document.querySelectorAll(".tab"); var viewElements = document.querySelectorAll(".view"); tabContainer.addEventListener("click", function (event) { if (event.target.classList.contains("tab")) { for (i of tabElements) { i.className = 'tab'; if (i === event.target) { event.target.classList.add('active'); console.log(i.innerHTML + ' is active'); } } } });

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <div class="tab-container"> <div class="tab active" data-view="html">HTML</div> <div class="tab" data-view="css">CSS</div> <div class="tab" data-view="javascript">JavaScript</div> </div> </body> </html>

Answer 2

You shouldn't be setting event.target's className (especially in the else condition)您不应该设置 event.target 的类名（尤其是在 else 条件下）

Try尝试

var tabContainer = document.querySelector(".tab-container");
var tabElements = document.querySelectorAll(".tab");
var viewElements = document.querySelectorAll(".view");

tabContainer.addEventListener("click", function (event) {
    if (event.target.matches(".tab")) {
        for (var i = 0; i < tabElements.length; i++) {
            if (tabElements[i] === event.target) {
                tabElements[i].className = "tab active";
            } else {
                tabElements[i].className = "tab";
            }
        }
    }
});

Notice that its tabElements[i] instead of event.target .请注意，它的tabElements[i]而不是event.target 。 I've also removed the redundant if condition like Chris G mentioned.我还删除了像 Chris G 提到的多余的 if 条件。

JavaScript 帮助 - 单击事件侦听器以激活 1 个元素节点并停用其他元素节点

问题描述

2 个解决方案

解决方案1
1 2021-02-05 07:34:58

解决方案2
0 2021-02-05 07:35:51

JavaScript 帮助 - 单击事件侦听器以激活 1 个元素节点并停用其他元素节点

问题描述

2 个解决方案

解决方案1 1 2021-02-05 07:34:58

解决方案2 0 2021-02-05 07:35:51

解决方案1
1 2021-02-05 07:34:58

解决方案2
0 2021-02-05 07:35:51