Question

我有4张卡片，我想在点击时更改其元素的文字，下面是我的HTML：

getEventListeners().click.forEach((e)=>{e.remove()})

因此，如果我点击任何卡片，它的文字应该是正常的，其他卡片应该关闭。我能够更改点击卡的文本，但我如何将其他卡值更改为关闭？下面是我的JS

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

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;
                }
            }

Answer 2

你可以这样做：

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"。

Fiddle

演示

＆＃13;

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";
  }
}

＆＃13;

<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>

＆＃13;

更改点击元素javascript的innerHTML

2 个答案: