Question

作为一名JavaScript新手，我仍在学习，因为我的网站越来越多，并且在过去的12个小时里一直在努力争取。

我的网站做什么

球员选择他们认为会赢得比赛的球队。
从数据库中提取匹配/固定装置
球员选择本轮，一轮可以有1到无数的比赛
在php循环中创建的元素（图像和无线电btns）将取决于给定回合的nr匹配

我想做什么

当用户选择团队/点击它时，请选择团队image-border：red

我得到了什么

HTML 的

echo'<div class="teams">';
        echo'<img src="images/teams/'.$src1.'.png" class="t1"  />'; 
        echo'<img src="images/teams/'.$src2.'.png" class="t2" />';  
    echo'</div>';

 <!--Radio Buttons below comment-->
 <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="" name="picks['.$x.']" id="three" value="draw"><span>Draw</span></label><br />

Jquery尝试一个

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

问题

所有team1边框都通过一次点击选中所有匹配（参见下面的img）

图像

enter image description here

Javascript尝试2

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";
    }

}

问题

只有第一场比赛球队边界被选中，当我移动到比赛2没有任何事情发生时（见img）

图像

enter image description here

Answer 1

运行它。这应该做你想要的。

1，每个选择器只选择一个项目：$（'。t1'）。每个

第二，$（this）.siblings（'t2'）缺少选择器中的句号。

function border() {
    var oneChecked = $('#one').is(':checked');
    var twoChecked = $('#two').is(':checked');

    $('img').each(function(){
       if(oneChecked)
       {
         $(this).siblings('.t2').css({'border':'none'});
         $(this).siblings('.t1').css({'border':'1px solid red'});
       }
       else if(twoChecked)
       {
         $(this).siblings('.t1').css({'border':'none'});
         $(this).siblings('.t2').css({'border':'1px solid red'});
       }
    });   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="teams">
<img src="http://3.bp.blogspot.com/-nnu1pYWswh4/UP1qvA5yiRI/AAAAAAAAAw4/8Jj_vj_wwG8/s1600/superhero_cartoons_l943.jpg" class="t1" width="200px" height: 300px; />;
<img src="http://3.bp.blogspot.com/-nnALU6o_LnM/UP1rBXHumcI/AAAAAAAAAxY/nc1RB0ZSUqU/s1600/superheroes_l623.jpg" class="t2" height="300px" width="200px "/>  
</div>

 <!--Radio Buttons below comment-->
 <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="" name="picks['.$x.']" id="three" value="draw"><span>Draw</span></label><br />

Answer 2

这实际上可以用简单的CSS解决！不需要那个花哨的jQuery！ ;）

input[type="radio"]{
    display:none;
}

input[type="radio"] + label
{
    background: #999;
    border: none;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type="radio"]:checked + label
{
    border: 1px solid red;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

<form>
  <input type="radio" id="1" name="1" checked></input>
  <label for="1"></label>
  <input type="radio" id="2" name="1" ></input>
  <label for="2"></label>
</form>
<br>
<form>
  <input type="radio" id="3" name="2" checked></input>
  <label for="3"></label>
  <input type="radio" id="4" name="2" ></input>
  <label for="4"></label>
</form>

从这里你可以简单地改变宽度/高度并添加background-image:，并且你有你想要的！我应该指出，name标记中的input属性必须完全相同非常重要！：）

Answer 3

除了它无法正常工作之外，原始代码的另一个问题是单选按钮没有唯一ID。

解决方案是将每组单选按钮与一组图像相关联。这可以通过用容器元素包装每组元素来完成。

<!-- This repeats for each group. -->
<div class="teamContainer">

<div class="teams">
    <span class="team team1">TEAM 1</span>
    <span class="team team2">TEAM 2</span>
</div>

<label><input type="radio" name="picks[0]" value=".team1"/>Team 1</label><br />
<label><input type="radio" name="picks[0]" value=".team2"/>Team 2</label><br />
<label><input type="radio" name="picks[0]" value=""/>Draw</label><br />

</div>

这样您就可以使用.closest()从单选按钮转到容器元素。然后，您可以使用.find()仅处理该组中的图片。

$(function() {
    $('.teamContainer').on('change', ':radio', function() {
        var $container = $(this).closest('.teamContainer'),
            $teams = $container.find('.teams'),
            value = $container.find(':radio:checked').val();
        $teams.find('.team').css({'border':'none'});
        $teams.find(value).css({'border':'1px solid red'});
    });
});

您应该绑定事件处理程序，而不是使用onclick属性。另外，我认为最好使用“更改”事件，而不是“点击”事件。

还有一件事，请注意我将单选按钮的值设置为选择器。这样就可以避免使用if语句。

jsfiddle

Javascript一次更改多个元素边框样式

3 个答案: