Javascript多图像颜色变化
Javascript multi images colour change
我有以下让用户选择他们认为会赢的球队和多少分
![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>';
请记住,fixture是在php循环中从数据库生成的,这取决于在给定的轮中有多少匹配
您需要获取所有匹配的元素并遍历它们。
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;
}
}
jQuery Demo: https://jsfiddle.net/tusharj/dkstwrbf/
试试这个:你可以遍历所有匹配的元素,而不是只处理第一个
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'});
}
});
}
相关文章:
- 每个选择器的Jquery css颜色都在变化,但字体大小却没有变化
- JS幻灯片与CSS背景颜色变化
- Javascript对象颜色动态变化
- 如何使用Javascript使屏幕颜色随时间变化
- 从表列中检索日期,并根据从今天到日期之间的天数使行的颜色发生变化
- 将鼠标悬停在图像上,图像的不透明度和图像下方标题的颜色会发生变化..同样,当标题变成两行时,它会破坏格式
- 输入时Javascript背景颜色会发生变化
- 如何根据高图中的值获得动态颜色变化
- 颜色变化基于所列问题的编号
- Javascript旋转初始BG颜色变化
- AngularJS:当css类发生变化时,如何通过切换来更改颜色属性
- 图表.js条形图颜色根据值而变化
- 使用CSS和JavaScript点击,链接颜色在被点击和激活时会发生变化,直到我点击其他链接
- 动画颜色变化的优雅方式
- 页面加载时背景颜色发生变化
- 悬停时列表项的背景颜色逐渐变化
- 主页链接'的背景颜色在Internet explorer中发生了变化,但在Mozilla Firefox中不起作
- 鼠标单击时表格颜色发生变化
- 如何生成产品的颜色变化
- 当序列计数变化时,使用NVD3维护堆叠/分组多条形图的颜色映射