Javascript多图像颜色变化 - Javascript multi images colour change

Javascript multi images colour change

本文关键字：变化颜色图像 Javascript | 更新日期: 2023-09-26

我有以下让用户选择他们认为会赢的球队和多少分

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