使用 JS 循环添加/删除 CSS Class

Question

我有一个导航菜单，显示来自单击主题的一组注释。 注释可以有 class note （如果它是可见的）或 class invisible的（如果它是隐藏的）。 我只想要点击显示的主题的注释。

问题是还显示了来自其他主题的一些注释。 即使thisTopic的长度始终为 2。

我是 JavaScript 的新手，所以我的循环中可能有错误？ 提前致谢：）

 function openTopic(evt, topicName) { var allNotes, thisTopic; /* Hide all notes */ allNotes = document.getElementsByClassName("note"); for (i = 0; i < allNotes.length; i++) { allNotes[i].classList.add("invisible"); allNotes[i].classList.remove("note"); } /* Show notes with correct topic */ thisTopic = document.getElementsByClassName(topicName); for (i = 0; i < thisTopic.length; i++) { thisTopic[i].classList.add("note"); thisTopic[i].classList.remove("invisible"); } }

 .box { border-radius: 10px; box-shadow: 5px 5px 8px #999; margin: 10px; padding: 10px; }.note { display: block; background-color: #ddd; }.invisible { display: none; }

 <nav class='box'> <h3>Navigation</h3> <ul> <li onClick="openTopic(event, 'topic1')">Topic 1</li> <li onClick="openTopic(event, 'topic2')">Topic 2</li> <li onClick="openTopic(event, 'topic3')">Topic 3</li> </ul> </nav> <main> <section class='note topic1 box'> <p>First topic 1 note</p> </section> <section class='note topic1 box'> <p>Second topic 1 note</p> </section> <section class='note topic2 box'> <p>First topic 2 note</p> </section> <section class='note topic2 box'> <p>Second topic 2 note</p> </section> <section class='note topic3 box'> <p>First topic 3 note</p> </section> <section class='note topic3 box'> <p>Second topic 3 note</p> </section> </main>

Answer 1

您的代码有两个问题：

• 您正在从元素中删除note class 。
• 您没有提供默认情况下应隐藏的元素是invisible的 class。

 function openTopic(evt, topicName) { var allNotes, thisTopic; /* Hide all notes */ allNotes = document.getElementsByClassName("note"); for (i = 0; i < allNotes.length; i++) allNotes[i].classList.add("invisible"); /* Show notes with correct topic */ thisTopic = document.getElementsByClassName(topicName); for (i = 0; i < thisTopic.length; i++) thisTopic[i].classList.remove("invisible"); }

 .box { border-radius: 10px; box-shadow: 5px 5px 8px #999; margin: 10px; padding: 10px; }.note { display: block; background-color: #ddd; }.note.invisible { display: none; }

 <nav class='box'> <h3>Navigation</h3> <ul> <li onClick="openTopic(event, 'topic1')">Topic 1</li> <li onClick="openTopic(event, 'topic2')">Topic 2</li> <li onClick="openTopic(event, 'topic3')">Topic 3</li> </ul> </nav> <main> <section class='note topic1 box'> <p>First topic 1 note</p> </section> <section class='note topic1 box'> <p>Second topic 1 note</p> </section> <section class='note topic2 box invisible'> <p>First topic 2 note</p> </section> <section class='note topic2 box invisible'> <p>Second topic 2 note</p> </section> <section class='note topic3 box invisible'> <p>First topic 3 note</p> </section> <section class='note topic3 box invisible'> <p>Second topic 3 note</p> </section> </main>

然而，考虑到这一点，我强烈推荐几件事：

• 颠倒你的逻辑。 （默认隐藏，然后激活。）
• 对topic#使用更高级别的id属性，而不是class 。

反转你的逻辑

目前，您有 3 个主题，每个主题有 2 个注释。 想象一下，你有 5 个主题，每个主题有 5 个注释。 使用您当前的逻辑，您需要将invisible的 class 默认分配给 20 个section元素。 相反，使用active的 class ，您只需将其分配给 5 个section元素：

.note {
    display: none;
    background-color: #ddd;
}
.note.active { display: block }

您可以看到这在更大规模的情况下如何影响您的代码片段：

 function openTopic(evt, topicName) { var allNotes, thisTopic; /* Hide all notes */ allNotes = document.getElementsByClassName("note"); for (i = 0; i < allNotes.length; i++) allNotes[i].classList.remove("active"); /* Show notes with correct topic */ thisTopic = document.getElementsByClassName(topicName); for (i = 0; i < thisTopic.length; i++) thisTopic[i].classList.add("active"); }

 .box { border-radius: 10px; box-shadow: 5px 5px 8px #999; margin: 10px; padding: 10px; }.note { display: none; background-color: #ddd; }.note.active { display: block; }

 <nav class='box'> <h3>Navigation</h3> <ul> <li onClick="openTopic(event, 'topic1')">Topic 1</li> <li onClick="openTopic(event, 'topic2')">Topic 2</li> <li onClick="openTopic(event, 'topic3')">Topic 3</li> </ul> </nav> <main> <section class='note topic1 box active'> <p>Topic 1 Note 1</p> </section> <section class='note topic1 box active'> <p>Topic 1 Note 2</p> </section> <section class='note topic1 box active'> <p>Topic 1 Note 3</p> </section> <section class='note topic1 box active'> <p>Topic 1 Note 4</p> </section> <section class='note topic1 box active'> <p>Topic 1 Note 5</p> </section> <section class='note topic2 box'> <p>Topic 2 Note 1</p> </section> <section class='note topic2 box'> <p>Topic 2 Note 2</p> </section> <section class='note topic2 box'> <p>Topic 2 Note 3</p> </section> <section class='note topic2 box'> <p>Topic 2 Note 4</p> </section> <section class='note topic2 box'> <p>Topic 2 Note 5</p> </section> <section class='note topic3 box'> <p>Topic 3 Note 1</p> </section> <section class='note topic3 box'> <p>Topic 3 Note 2</p> </section> <section class='note topic3 box'> <p>Topic 3 Note 3</p> </section> <section class='note topic3 box'> <p>Topic 3 Note 4</p> </section> <section class='note topic3 box'> <p>Topic 3 Note 5</p> </section> </main>

使用id和分组

在父元素中对元素进行分组是一种常见的做法。 在您的情况下，我建议使用id属性将您的section元素封装到为每个主题设计的div中：

<div id="topic1Notes" class="topic-container active">
    <section class="note box">
        <p>Topic 1 Note 1</p>
    </section>
</div>

使用引导程序

如果使用像Bootstrap这样的第三方工具不是不可能的，他们已经处理了这个问题，并提供了非常容易遵循的代码，从而减轻了你的负担：

 .box { border-radius: 10px; box-shadow: 5px 5px 8px #999; margin: 10px; padding: 10px; }.note { display: block; background-color: #ddd; }.note.invisible { display: none; }

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" /> <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Topic 1</button> <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Topic 2</button> <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Topic 3</button> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <section for="topic1" class='note topic1 box'> <p>First topic 1 note</p> </section> <section class='note topic1 box'> <p>Second topic 1 note</p> </section> </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> <section class='note topic2 box'> <p>First topic 2 note</p> </section> <section class='note topic2 box'> <p>Second topic 2 note</p> </section> </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> <section class='note topic3 box'> <p>First topic 3 note</p> </section> <section class='note topic3 box'> <p>Second topic 3 note</p> </section> </div> </div>

---

祝你好运！