更改点击元素javascript的innerHTML

Question

我有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';
                }
            }

Answer 1

您可以关闭所有卡片然后设置this卡片或者
您可以创建一个变量来存储最后一张被点击的卡片,然后只需将该卡片关闭并点击即可.
这样您就不必在事件处理程序中使用循环.

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

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