循环遍历 div 以更改特定子项的背景颜色

Question

我目前正在帮助开发一个体育页面，为不同球队的不同球员提供数据。这个想法是遍历一组“卡片”，找到一个应用了背景团队颜色的 div，然后根据其中的团队名称更改该颜色。我从下面的这个 for 循环开始（客户想要纯 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 不在页面上？这是我的sn-p：

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。