我有以下内容,让用户可以选择他们认为将赢得哪支球队以及获得多少分
![在此处输入图片说明] [1]
根据用户选择图像边框高亮显示所选团队用户的红色。
我的问题是,我的代码只针对第一个夹具/匹配而不是第二个,第三个,第四个等,如图所示
我确定这应该是一个简单的解决方案,但我似乎无法让它工作......任何帮助都会非常感激
function border() {
var el = document.getElementsByClassName("t1")[0];
var el2 = document.getElementsByClassName("t2")[0];
if (document.getElementById("one").checked) {
el.style.borderColor = "red";
el.style.borderStyle = "solid";
el2.style.borderColor = "";
el2.style.borderStyle = "none";
}
else if (document.getElementById("two").checked) {
el.style.borderColor = "";
el.style.borderStyle = "none";
el2.style.borderColor = "red";
el2.style.borderStyle = "solid";
}
}
<label class="blue"><input type="radio" onclick="border()" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
<label class="green"><input type="radio" onclick="border()" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
<label class="green"><input type="radio" onclick="border()" name="picks['.$x.']" id="three" value="draw"><span>Draw</span></label><br />
echo'<div class="teams">';
echo'<img src="images/teams/'.$src1.'.png" class="t1" />';
echo'<img src="images/teams/'.$src2.'.png" class="t2" />';
echo'</div>';
记住灯具是在数据库的php循环中生成的,具体取决于给定回合中有多少匹配
答案 0 :(得分:2)
您需要获取所有匹配元素并循环遍历它们。
function border() {
var el = document.getElementsByClassName('t1'),
el2 = document.getElementsByClassName('t2');
var borderColor1 = '',
borderStyle1 = 'none',
borderColor2 = '',
borderStyle2 = 'none';
if (document.getElementById('one').checked) {
borderColor1 = 'red';
borderStyle1 = 'solid';
} else if (document.getElementById('two').checked) {
borderColor2 = 'red';
borderStyle2 = 'solid';
}
for(var i = 0; i < el.length; i++) {
el[i].borderColor = borderColor1;
el[i].borderStyle = borderStyle1;
}
for(var j = 0; j < el2.length; j++) {
el2[j].borderColor = borderColor2;
el2[j].borderStyle = borderStyle2;
}
}
答案 1 :(得分:0)
试试这个:你可以遍历所有匹配的元素而不是只处理第一个
function border() {
var oneChecked = $('#one').is(':checked');
var twoChecked = $('#two').is(':checked');
$('.t1').each(function(){
if(oneChecked)
{
$(this).siblings('t2').css({'border':'none'});
$(this).css({'border':'1px solid red'});
}
else if(twoChecked)
{
$(this).css({'border':'none'});
$(this).siblings('t2').css({'border':'1px solid red'});
}
});
}