Question

考虑以下图片，让用户猜出谁将赢得某项体育比赛

enter image description here

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

将所选团队的样式（文字颜色）更改为黑色，以便用户在按提交前查看他选择的人

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

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

1 个答案: