更改点击元素javascript的innerHTML

德莱吉·阿格劳瓦尔（Dheeraj Agrawal）

我有4张卡片，我想在点击时更改其元素的文本，以下是我的html：

<tr>
      <td class="card">down</td>
      <td class="card">down</td>
    </tr>
    <tr>
      <td class="card">down</td>
      <td class="card">down</td>
    </tr>

因此，如果我单击任何卡片，则其文字应朝上，而其他则应朝下。我可以更改点击的卡片的文本，但是如何将其他卡片的值改回原先的值？下面是我的JS

var cards = document.getElementsByClassName('card');

            for (var i = 0; i < cards.length; i++) {
                cards[i].onclick = function(target) {
                    this.innerHTML = 'up';
                }
            }

普特万德

您可以这样做：

var cards = document.getElementsByClassName('card');
for (var i = 0; i < cards.length; i++) {
  cards[i].onclick = function(target) {
    // Turn the 'cards' into an array and loop over it.
    [].forEach.call(cards, function(card) { 
      card.innerHTML = "down" 
    });
    this.innerHTML = "up";
  }
}

这将遍历所有卡，并将它们的值返回给"down"。

小提琴

下面的演示

var cards = document.getElementsByClassName('card');
for (var i = 0; i < cards.length; i++) {
  cards[i].onclick = function(target) {
    [].forEach.call(cards, function(card) { 
      card.innerHTML = "down" 
    });
    this.innerHTML = "up";
  }
}

<table>

  <tr>
    <td class="card">down</td>
    <td class="card">down</td>
  </tr>
  <tr>
    <td class="card">down</td>
    <td class="card">down</td>
  </tr>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。