用JS循环添加/删除CSS类

Question

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

问题是，其他主题的一些注释也在展示。即使thistopic的长度始终为2。

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

null

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>

null

Answer 1

您的代码有两个问题：

• 您正在从元素中删除note类。
• 您没有将默认情况下应该隐藏的元素赋予invisible类。

null

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;
}

html lang-html prettyprint-override"><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>