Javascript 在单击时更改多个元素样式

Question

考虑以下图像，让用户猜测谁将赢得某场体育比赛

我正在尝试执行以下操作:

• 将所选团队的样式(文本颜色)更改为黑色，以便用户在按下提交之前查看他选择的人

  while($fixtures> $upcoming){
   //radio buttons to select team
  <input type="radio" id="'.$x.'"onclick="teams()" name="picks['.$x.']" value="'.$row['team1'].'"/>
   <input type="radio" onclick="teams()" name="picks['.$x.']" value="'.$row['team2'].'"/>
  <input type="radio" onclick="teams()" name="picks['.$x.']" value="draw" />
      echo'<b>BY</b>';
          echo'<select name="score[]" id="score[]">';
              echo'<option value="0">0</option>';
              echo'<option value="1">1</option>';
              echo'<option value="2">2</option>';
              echo'<option value="3">3</option>';
              echo'<option value="4">4</option>';
              echo'<option value="5">5</option>';
  
              echo'</select>';    
              echo'<b>POINTS</b>';
     echo'
  </div>
  
  // where team names are displayed, this needs to change style onclick
  echo'<div id="dispPicks">';
      foreach($dispTeam1 as $key => $team1){
          echo '<p class="team1">';
          echo $team1;
          echo'</p>';
          echo ' VS ' ;
          echo'<p class="team2">';
          echo $dispTeam2[$key];
          echo'</p>';
      }
  echo'</div>';
  

  我尝试编写以下 javascript

    var elements = document.getElementById("makePicks").elements;
      var len = elements.length;
      var team=[]
      for(x=0; x<len; x++){
        if(elements[x].type == "radio" && elements[x].checked== true)
        {
          team[x] = t1[x].value; //the value of team[x] is now selected team 
        }
  

我的问题

team[x] 现在有选定的团队，但是我现在卡住了......并且无法弄清楚如何更改团队名称样式......从这里开始。

需要考虑的事项:

• 团队/赛程是从数据库中动态提取并在 php 循环中生成的
  • 每一轮都有不同数量的赛程

Answer 1

所以你应该这样做。为所有可点击的团队添加相同的类，比如 class="team"。在你的CSS中添加这个

.selected{
   background-color:#fff;
}

现在像这样使用 Jquery，

$('.team').click(function(){
   $(this).toggleClass('selected');
})