确保Accordion标签是独立的

Question

我正在创建一个网站，以显示不同运动员的信息。目前，我正在尝试这样做的方法是让每个玩家都拥有自己的手风琴标签。然后，您可以在点击时放下手风琴，然后您可以使用这些标签过滤您要查找的信息。但是，我最初的做法是让JavaScript抓取每个标签的唯一ID。我很快就发现了制造第二个玩家时显然ID不能正常工作，因为第二个手风琴标签会打开第一个手风琴的信息。我尝试将它改为课堂，但现在却让它没有反应。任何帮助将不胜感激。寻找有关如何修复JavaScript代码以获取正确选项卡的任何帮助。我试过像this.那样，并没有回应那个尝试单击被点击的标签。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}

function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementByClassName(tabName).style.display = "block";
    this.evt.currentTarget.className += " active";
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 10px 5px 18px 5px;
  display: none;
  background-color: white;
  overflow: hidden;
}

h3 {
margin: 0;
padding: 10px 0 5px 0;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<h2>Accordion</h2>
<button class="accordion"><h3>1. Player Number 1</h3></button>
  <div class="panel">
      <div class="tab">
          <button class="tablinks" onclick="openTab(event, 'Position')">Position</button>
          <button class="tablinks" onclick="openTab(event, 'Positives')">Positives</button>
          <button class="tablinks" onclick="openTab(event, 'Negatives')">Negatives</button>
          <button class="tablinks" onclick="openTab(event, 'Overall')">Overall</button>
          <button class="tablinks" onclick="openTab(event, 'Comparison')">Comparison</button>
        </div>

        <div class="Position tabcontent">
          <h3>Position</h3>
          <p>asdfasfsadfff</p>
        </div>

        <div class="Positives tabcontent">
          <h3>Positives</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Negatives tabcontent">
          <h3>Negatives</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Overall tabcontent">
          <h3>Overall</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Comparison tabcontent">
          <h3>Comparison</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>
  </div>

  <button class="accordion"><h3>2. Player Number 2</h3></button>
  <div class="panel">
      <div class="tab">
          <button class="tablinks" onclick="openTab(event, 'Position')">Position</button>
          <button class="tablinks" onclick="openTab(event, 'Positives')">Positives</button>
          <button class="tablinks" onclick="openTab(event, 'Negatives')">Negatives</button>
          <button class="tablinks" onclick="openTab(event, 'Overall')">Overall</button>
          <button class="tablinks" onclick="openTab(event, 'Comparison')">Comparison</button>
        </div>

        <div class="Position tabcontent">
          <h3>Position</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Positives tabcontent">
          <h3>Positives</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Negatives tabcontent">
          <h3>Negatives</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Overall tabcontent">
          <h3>Overall</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Comparison tabcontent">
          <h3>Comparison</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>
  </div>

  <button class="accordion"><h3>3. Player Number 3</h3></button>
  <div class="panel">
      <div class="tab">
          <button class="tablinks" onclick="openTab(event, 'Position')">Position</button>
          <button class="tablinks" onclick="openTab(event, 'Positives')">Positives</button>
          <button class="tablinks" onclick="openTab(event, 'Negatives')">Negatives</button>
          <button class="tablinks" onclick="openTab(event, 'Overall')">Overall</button>
          <button class="tablinks" onclick="openTab(event, 'Comparison')">Comparison</button>
        </div>

        <div class="Position tabcontent">
          <h3>Position</h3>
          <p></p>
        </div>

        <div class="Positives tabcontent">
          <h3>Positives</h3>
          <p></p>
        </div>

        <div class="Negatives tabcontent">
          <h3>Negatives</h3>
          <p></p>
        </div>

        <div class="Overall tabcontent">
          <h3>Overall</h3>
          <p></p>
        </div>

        <div class="Comparison tabcontent">
          <h3>Comparison</h3>
          <p></p>
        </div>
  </div>

感谢您的时间和帮助。

Answer 1

修正了它。只需获取所选手风琴的panel div并选择具有该类的元素并解决它。但是一旦手风琴关闭，手风琴中先前选择的标签仍然被选中，这种情况需要相应处理。

P.S：请here关于如何为多个元素实现单个事件监听器而不是迭代NodeList。只是为了优化。

＆＃13;

＆＃13;

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}

function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    var panel = event.target.parentElement.parentElement;  panel.querySelector("."+tabName).style.display = "block";
    evt.target.className += " active";
}

＆＃13;

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 10px 5px 18px 5px;
  display: none;
  background-color: white;
  overflow: hidden;
}

h3 {
margin: 0;
padding: 10px 0 5px 0;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

＆＃13;

<h2>Accordion</h2>
<button class="accordion"><h3>1. Player Number 1</h3></button>
  <div class="panel">
      <div class="tab">
          <button class="tablinks" onclick="openTab(event, 'Position')">Position</button>
          <button class="tablinks" onclick="openTab(event, 'Positives')">Positives</button>
          <button class="tablinks" onclick="openTab(event, 'Negatives')">Negatives</button>
          <button class="tablinks" onclick="openTab(event, 'Overall')">Overall</button>
          <button class="tablinks" onclick="openTab(event, 'Comparison')">Comparison</button>
        </div>

        <div class="Position tabcontent">
          <h3>Position</h3>
          <p>asdfasfsadfff</p>
        </div>

        <div class="Positives tabcontent">
          <h3>Positives</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Negatives tabcontent">
          <h3>Negatives</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Overall tabcontent">
          <h3>Overall</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Comparison tabcontent">
          <h3>Comparison</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>
  </div>

  <button class="accordion"><h3>2. Player Number 2</h3></button>
  <div class="panel">
      <div class="tab">
          <button class="tablinks" onclick="openTab(event, 'Position')">Position</button>
          <button class="tablinks" onclick="openTab(event, 'Positives')">Positives</button>
          <button class="tablinks" onclick="openTab(event, 'Negatives')">Negatives</button>
          <button class="tablinks" onclick="openTab(event, 'Overall')">Overall</button>
          <button class="tablinks" onclick="openTab(event, 'Comparison')">Comparison</button>
        </div>

        <div class="Position tabcontent">
          <h3>Position</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Positives tabcontent">
          <h3>Positives</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Negatives tabcontent">
          <h3>Negatives</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Overall tabcontent">
          <h3>Overall</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>

        <div class="Comparison tabcontent">
          <h3>Comparison</h3>
          <p>asdfasdfasdfasdfasdfasdf</p>
        </div>
  </div>

  <button class="accordion"><h3>3. Player Number 3</h3></button>
  <div class="panel">
      <div class="tab">
          <button class="tablinks" onclick="openTab(event, 'Position')">Position</button>
          <button class="tablinks" onclick="openTab(event, 'Positives')">Positives</button>
          <button class="tablinks" onclick="openTab(event, 'Negatives')">Negatives</button>
          <button class="tablinks" onclick="openTab(event, 'Overall')">Overall</button>
          <button class="tablinks" onclick="openTab(event, 'Comparison')">Comparison</button>
        </div>

        <div class="Position tabcontent">
          <h3>Position</h3>
          <p></p>
        </div>

        <div class="Positives tabcontent">
          <h3>Positives</h3>
          <p></p>
        </div>

        <div class="Negatives tabcontent">
          <h3>Negatives</h3>
          <p></p>
        </div>

        <div class="Overall tabcontent">
          <h3>Overall</h3>
          <p></p>
        </div>

        <div class="Comparison tabcontent">
          <h3>Comparison</h3>
          <p></p>
        </div>
  </div>

＆＃13;

＆＃13;

＆＃13;