切換像單選按鈕的圖像

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

$('.num-players-group a').click(function() { 
    $(this).children('img').toggle(); 
}); 

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：選擇+選擇下一個同級元素。