更改點擊/切換腳本添加額外的按鈕

Question

我需要三個按鈕添加到這個腳本共計5

我第一次做的腳本兩個按鈕，但我現在需要增加三個。

我只關心這部分嗎？這是我需要改變的唯一領域嗎？

var varval = ''; 
    if ($(this).hasClass('button-toggle-on')) { 
     varval = $(this).hasClass('gnF') ? 'Female' : 'Male'; 

鏈接：http://jsfiddle.net/9cr4F/9/

這裏是我的腳本：

$(function() { 
var $buttons = $("input[type='button']"); 
$buttons.click(function() { 

    $(this).parent().siblings('.bx, #bxGender .gender').css({'background':'#2F2F2F','color':'#fff'}); 
    $buttons.not(this).removeClass('button-toggle-on'); 
    $(this).toggleClass('button-toggle-on').attr('style',''); 

    var varval = ''; 
    if ($(this).hasClass('button-toggle-on')) { 
     varval = $(this).hasClass('gnF') ? 'Female' : 'Male'; 

    $(this).siblings('input[type="button"]').css('background-position','0 -180px'); 
    } 
    else { 
      $(this).siblings('input[type="button"]').attr('style',''); 
     $(this).parent().siblings('.bx').attr('style',''); 
    } 
    $("#gender").val(varval); 
}); 
});​ 

Answer 1

從什麼，我從你的代碼獲得，你現在所擁有的兩個按鈕：Male和Female。當你點擊一個元素時，它會將一些#gender元素的值更改爲男性或女性，具體取決於它是否具有某個類。

我想你想爲性別添加三個可能的值，因此三個新的按鈕。如果是這樣的話，那麼就在你的代碼的關鍵地方，你將不得不修改：

varval = $(this).hasClass('gnF') ? 'Female' : 'Male'; 

現在，您使用的是三元運算符，以確定正確的值。如果你正在尋找五個可能的值而不是原來的兩個，那會變得很髒。

除非您的HTML有任何更改，否則我建議您改用switch。

但是，關於您真正的問題is that the only thing I need to change?，我不得不說，從它的外觀來看，如果您設置了正確的HTML，就可以使代碼變得更加簡單。

喜歡的東西：

<input type="button" data-gender="Male" /> 
<input type="button" data-gender="Female" /> 

...使得它容易得多隻是這樣做，而不是：

var varval = $(this).attr('data-gender'); 

最重要的是，這樣的作品，無論你有多少個按鈕有。