考虑以下图像,它让用户猜测谁将赢得某场体育比赛
我正在尝试执行以下操作:
将所选团队的样式(文本颜色)更改为黑色,以便 用户在按下提交之前查看他选择的人
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 循环中生成的
- 每轮都有不同数量的赛程
最佳答案
所以你应该这样做。为所有可点击的团队添加相同的类,例如 class="team"
。在你的CSS中添加这个
.selected{
background-color:#fff;
}
现在像这样使用 Jquery,
$('.team').click(function(){
$(this).toggleClass('selected');
})
关于Javascript 在点击时更改多个元素样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30535601/