无论如何，是否可以单独编写组中的按钮

Question

抱歉，如果标题没有多大意义，我正在尝试单击一组按钮时在页面上显示信息，具体取决于单击了哪个单个按钮，该特定按钮会失去其样式。我可以让所有的按钮失去它们的风格，但不是单个的。

 document.getElementById("cards").onclick = function(){
    var index = getRandom(22);
    var currentCard = deck[index];
    document.getElementById("display").innerHTML = `<img src=${currentCard.image}.jpg><h3>${currentCard.name}</h3><p>${currentCard.description}</p>`;

    document.getElementById("cards1").onclick = cards.style.display = 'none';
        document.getElementById("cards2").onclick = cards.style.display = 'none';
        document.getElementById("cards3").onclick = cards.style.display = 'none';
        document.getElementById("cards4").onclick = cards.style.display = 'none';
        document.getElementById("cards5").onclick = cards.style.display = 'none';
        document.getElementById("cards6").onclick = cards.style.display = 'none';
        document.getElementById("cards7").onclick = cards.style.display = 'none';
        document.getElementById("cards8").onclick = cards.style.display = 'none';
        document.getElementById("cards9").onclick = cards.style.display = 'none';
        document.getElementById("cards10").onclick = cards.style.display = 'none';
        document.getElementById("cards11").onclick = cards.style.display = 'none';
        document.getElementById("cards12").onclick = cards.style.display = 'none';
        document.getElementById("cards13").onclick = cards.style.display = 'none';
        document.getElementById("cards14").onclick = cards.style.display = 'none';
        document.getElementById("cards15").onclick = cards.style.display = 'none';
        document.getElementById("cards16").onclick = cards.style.display = 'none';
        document.getElementById("cards17").onclick = cards.style.display = 'none';
        document.getElementById("cards18").onclick = cards.style.display = 'none';
        document.getElementById("cards19").onclick = cards.style.display = 'none';
        document.getElementById("cards20").onclick = cards.style.display = 'none';
        document.getElementById("cards21").onclick = cards.style.display = 'none';
        document.getElementById("cards").onclick = null;
};

             <div id="set1_free" name="10" class="card-row">
                    <ul>
        <li<button id="cards" sub id="cards1" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li1<button id="cards" sub id="card2" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li2<button id="cards"sub id="cards3" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards4" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards5" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards6" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards7" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards" sub id="cards8" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards9" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards10" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards11" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards12" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards13" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards14" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards15" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards16" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards17" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards18" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards19" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards20" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
        <li<button id="cards"sub id="cards21" onclick="myFunction()"><img src="/images/small/back.jpg" img id="onecards"></li></button>
    
</ul>
        </div>

Answer 1

正如评论中提到的Lain，您的标记中有很多问题。

如果认为您正在寻找这样的东西：

• 为每张卡片添加一个点击监听器。
• 如果显示了当前卡片，请将其隐藏
• 显示点击的卡片

document.querySelectorAll(".card button").forEach((e) => {
  e.addEventListener("click", () => {
    let current = document.querySelector(".content.show");
    if (current) {
      current.classList.remove("show");
    }
    e.parentNode.querySelector(".content").classList.add("show")
  });
});

ul {
  list-style-type: none;
}

.content {
  display: none;
}

.content.show {
  display: inline;
}

<ul>
  <li class="card">
    <button>Show</button>
    <div class="content">Card 1</div>
  </li>
  <li class="card">
    <button>Show</button>
    <div class="content">Card 2</div>
  </li>
  <li class="card">
    <button>Show</button>
    <div class="content">Card 3</div>
  </li>
  <li class="card">
    <button>Show</button>
    <div class="content">Card 4</div>
  </li>
</ul>