javascript - 使用 JavaScript 单击其他卡片后将卡片向下翻转

Question

当单击一个项目时，我试图让文本说“向上”。单击另一个项目时，该项目应显示“向上”，其他项目应显示“向下”

这就是我到目前为止所拥有的。没有点击，我无法让其他项目“下降”。

  const cards = document.querySelectorAll(".card");

  cards.forEach((card, i, arr) => {
    card.addEventListener("click", (e) => {
      let clickedCard = e.target;

      if (clickedCard.textContent == "down") {
        clickedCard.textContent = "up";
      } else if (clickedCard.textContent == "up") {
        clickedCard.textContent = "down";
      }
    });
  });

<table id="card-container">
    <tbody>
      <tr>
        <td class="card">down</td>
        <td class="card">up</td>
      </tr>
      <tr>
        <td class="card">down</td>
        <td class="card">down</td>
      </tr>
      <tr>
      <td class="card">down</td>
      <td class="card">down</td>
    </tr>
    </tbody>
  </table>

标签： javascript

Answer 1

而不是检查单词是“向上”还是“向下”，您可以将所有单词设置为“向下”并在（内部）循环之后将您的clickedCard背部设置为“向上” 。

const cards = document.querySelectorAll(".card");

cards.forEach((card, i, arr) => {
  card.addEventListener("click", (e) => {
    let clickedCard = e.target;
    
    // Set all items to "down"
    cards.forEach((card, i, arr) => {
      card.textContent = "down";
    });
    
    // Set clicked item to "up"
    clickedCard.textContent = "up";
  });
});

<table id="card-container">
  <tbody>
    <tr>
      <td class="card">down</td>
      <td class="card">up</td>
    </tr>
    <tr>
      <td class="card">down</td>
      <td class="card">down</td>
    </tr>
    <tr>
    <td class="card">down</td>
    <td class="card">down</td>
  </tr>
  </tbody>
</table>