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');

最重要的是，无论你有多少个按钮，都可以。

更改单击/切换脚本以添加其他按钮

1 个答案: