0

我需要在此脚本中再添加三个按钮，总共 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);
});
});​
4

1 回答 1

0

根据我从您的代码中得到的信息，您现在有两个按钮：Male和Female. 当您单击一个时，它会将某些#gender元素的值更改为男性或女性，具体取决于它是否具有某些类。

我想您想为性别添加另外三个可能的值，因此添加了三个新按钮。如果是这种情况，那么您的代码中有一个关键位置需要修改：

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

现在，您正在使用三元运算符来确定正确的值。如果您正在查看五个可能的值而不是原来的两个，那将会变得很脏。

除非您的 HTML 有任何更改，否则我建议您改用 a 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');

最重要的是，不管你有多少按钮，它都有效。

于 2012-04-16T15:49:58.223 回答