라디오 버튼과 같은 이미지 전환하기

Question

저는 jQuery와 javascript에 조금 익숙합니다. 이 방법을 사용하여 켜고 끌 수있는 3 개의 이미지가 있습니다.

라디오 단추와 마찬가지로 한 번에 하나씩 만 토글 할 수 있습니까?

<form class="num-players-group" action=""> 
    <input type="hidden" id='testbutton'> 

    <a href="#" class="players2"> 
    <img src="Assets/Menu/DOR_players_2_off.png" style="display:inline-block" class="player-btn" alt="2 off" /> 
    <img src="Assets/Menu/DOR_players_2_on.png" style="display:none" class="player-btn" alt="2" /> 
    </a> 

    <a href="#" class="players3"> 
    <img src="Assets/Menu/DOR_players_3_off.png" style="display:inline-block" class="player-btn" alt="3 off" /> 
    <img src="Assets/Menu/DOR_players_3_on.png" style="display:none" class="player-btn" alt="3" /> 
    </a> 

    <a href="#" class="players4"> 
    <img src="Assets/Menu/DOR_players_4_off.png" style="display:inline-block" class="player-btn" alt="4 off" /> 
    <img src="Assets/Menu/DOR_players_4_on.png" style="display:none" class="player-btn" alt="4" /> 
    </a> 

</form> 

내가 jQuery를 또한 사용하고 있습니다 :

$('.players2').click(function() { 
    $(this).find('img').toggle(); 
}); 
$('.players3').click(function() { 
    $(this).find('img').toggle(); 
}); 
$('.players4').click(function() { 
    $(this).find('img').toggle(); 
}); 

내가

$('.players4').not(this).removeClass('player-btn'); 

Answer 1

의 라인을 따라 뭔가를 사용해야이

JS Fiddle

같은 것을 사용할 수 있습니다

Answer 2

체감을 시도합니다 (참고 : 나는 당신의 HTML 클래스 선택기를 단순화했습니다) :

$(function(){ // DOM ready 
 
    
 
    var $plBtn = $('a.players'); 
 
    
 
    $plBtn.click(function(e){ 
 
    e.preventDefault(); 
 
    $plBtn.removeClass('selected'); // Remove selected class from all 
 
    $(this).addClass('selected'); // Add to clicked Button 
 
    }); 
 
    
 
});

a.players{ 
 
    display:inline-block; 
 
    text-decoration:none; 
 
    border-radius:5px; 
 
    overflow:hidden; 
 
} 
 
a.players img{ 
 
    vertical-align:middle; 
 
} 
 
a.players img+img{ display:none; } /* Hide next sibling image */ 
 

 
a.players.selected img { display:none; } /* if selected hide red image */ 
 
a.players.selected img+img{ display:block; } /* and show the green one  */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="num-players-group" action=""> 
 
    <input type="hidden" id='testbutton'> 
 

 
    <a href="#" class="players"> 
 
    <img src="//placehold.it/40x40/f00&text=2" alt="2 off" /> 
 
    <img src="//placehold.it/40x40/0ff&text=2" alt="2" /> 
 
    </a> 
 

 
    <a href="#" class="players"> 
 
    <img src="//placehold.it/40x40/f00&text=3" alt="3 off" /> 
 
    <img src="//placehold.it/40x40/0ff&text=3" alt="3" /> 
 
    </a> 
 

 
    <a href="#" class="players"> 
 
    <img src="//placehold.it/40x40/f00&text=4" alt="4 off" /> 
 
    <img src="//placehold.it/40x40/0ff&text=4" alt="4" /> 
 
    </a> 
 

 
    </form>

P.S을 : 선택기 +은 다음 형제 요소를 선택합니다.