Question

我目前正在帮助开发一个体育页面，为不同球队的不同球员提供数据。我们的想法是遍历一组“卡片”，找到一个应用了背景团队颜色的div，并根据其中的团队名称更改该颜色。我从下面的循环开始（客户端想要纯JS）：

var containerDiv = document.getElementsByClass("my-card");
var innerDivs = containerDiv.getElementsByClassName("card-details-team-container");
for(var i=0; i<innerDivs.length; i++)
{
     if ( innerDivs[i].innerHTML = "Team 1" ) {
        this.style.backgroundColor = "blue";
     } else if ( innerDivs[i].innerHTML = "Team 2" ) {
        this.style.backgroundColor = "green";
     } else {
        this.style.backgroundColor = "yellow";
     }
}

这不起作用，我不确定为什么？它似乎正确连接，但团队颜色没有变化。此外，这个数据是实时点击按钮引入的，所以我想知道，也许JS无法抓取数据，因为页面最初加载时页面上没有这个HTML？这是我的片段：

var containerDiv = document.getElementsByClass("my-card");
var innerDivs = containerDiv.getElementsByClassName("card-details-team-container");
for(var i=0; i<innerDivs.length; i++)
{
     if ( innerDivs[i].innerHTML = "Team 1" ) {
     	this.style.backgroundColor = "blue";
     } else if ( innerDivs[i].innerHTML = "Team 2" ) {
     	this.style.backgroundColor = "green";
     } else {
     	this.style.backgroundColor = "yellow";
     }
}

.my-card { float: left; }
.card-details-team-container { background: #ff0000; }

<div class="my-grid-of-cards">
  <div class="my-card">
    <div class="card-details">
      <img src="http://placehold.it/100x50" />
      <p class="card-details-name">Player 1</p>
      <div class="card-details-team-container">
        <p class="card-details-team">Team 1</p>
      </div>
      <p class="card-details-next-game">Next game: tomorrow</p>
    </div>
  </div>
  
  <div class="my-card">
    <div class="card-details">
      <img src="http://placehold.it/100x50" />
      <p class="card-details-name">Player 2</p>
      <div class="card-details-team-container">
        <p class="card-details-team">Team 2</p>
      </div>
      <p class="card-details-next-game">Next game: tomorrow</p>
    </div>
  </div>
  
  <div class="my-card">
    <div class="card-details">
      <img src="http://placehold.it/100x50" />
      <p class="card-details-name">Player 3</p>
      <div class="card-details-team-container">
        <p class="card-details-team">Team 3</p>
      </div>
      <p class="card-details-next-game">Next game: tomorrow</p>
    </div>
  </div>
</div>

提前致谢！

Answer 1

首先，你要分配而不是测试平等。

if(innerDivs[i].innerHTML == "Team 2")

应该是您使用的模式。

那说，这是非常脆弱的;我不禁想知道你是否会更好地为每个匹配团队的元素分配一个类名，然后相应地设置该类的样式。不需要JS。

循环通过div来更改特定孩子的背景颜色

1 个答案: