このスクリプトにさらに3つのボタンを追加して、合計5つにする必要があります。
最初に2つのボタンのスクリプトを作成しましたが、次に3つ追加する必要があります。
私はこの部分だけに関心がありますか?これは私が変更する必要がある唯一の領域ですか?
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);
});
});