Javascript一次更改多個元素邊框樣式onclick

Question

作爲一名JavaScript新手，我仍然在隨着網站的發展而學習，並且在過去的12個小時中一直在與此戰鬥。

什麼我的網站確實

• 球員選擇球隊誰，他們認爲會贏得比賽。
• 匹配/比賽時間是從數據庫中抽取
• 播放機使拾取爲圓，圓可以具有1至在PHP環產生無數匹配
元件
• NR（圖像和無線電btns）將取決於比賽的NR對於給定的輪

我所試圖做的

• 當用戶選擇它的團隊/點擊，請選擇球隊圖像邊界：紅色

我有什麼

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邊框與所有與一個單一的點擊圖片

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

} 

比賽（見下文IMG）

選擇

問題LEM

只有第一個參賽隊的邊界被選中，當我移動到第2場沒有任何反應（見圖片）

圖片

Answer 1

除了它不工作，原始代碼的另一個問題是單選按鈕沒有唯一的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

Answer 2

運行此。這應該做你正在尋找的東西。

1，每個選擇器僅選擇單個文件：$（」。T1 '），每個

2，$（本）.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 3

這其實可以用簡單的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:，瞧你有你想要的！我應該指出，input標籤中的name屬性必須相同纔是非常重要！ :)