Javascript 向脚本添加更多子脚本

我有一个很酷的脚本，可以使用两个按钮。我需要添加三个按钮作为选项，总共五个

整个脚本是否需要重新编写，或者我是否可以添加更多的DIV类？不知道如何接近。在这上面工作了几天

这是我的链接：

HTML:

jQuery：

$(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);
    });
});

---

您首先需要的是一个要验证的标记，目前它不是，文档中的ID必须是唯一的，所以当您这样做时

<div id="sp"></div>

通过使用按钮上的value属性，可以简化jquery端，如果设置文本缩进，则文本不会显示，然后可以使用$（this.val（））检索值

这为您提供了更大的灵活性，因为您可以拥有任意多个按钮，但如果您正在构建一个包含多行的表单，我建议您也使用一个类作为包含结果的输入，并修改值分配，以便它获取最接近的结果输入并更新它，因此，它适用于所有行

这是修改后的小提琴-第三个按钮的样式当然是螺丝钉，但我相信它会给你你所需要的：）

编辑：优化CSS多一点

---

编辑2：优化了jquery代码，并将背景定位移动到类按钮切换，因为当需要应用背景位置时，它处于打开状态。

什么按钮？什么时候哪里什么课程/身份证？怎么做？附言：总是尝试为下一代添加内联代码。所以以后不能再依赖断开的链接了。现在还不清楚你在问什么。你可能想更清楚地说明你的预期行为/要求。

$(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);
    });
});

<div id="sp"></div>

<div class="sp"></div>

.gnM, 
.gnF, 
.gnA {
    background:#E8E8E8 0px 0px no-repeat; 
    text-indent:-10000px;
    width:137px;
    height: 60px;
    margin-top:0px;
    padding: 0;
    border: 0;
    margin-left: 0px;
    float: left;
    outline: none;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 105%;
    font-style:normal;
    color:#03F;
}
.gnA {
    background-image:url('http://www.41q.org/admin/img/alien.png');   
}
.gnM {
    background-image:url('http://www.41q.org/admin/img/male.png');   
}
.gnF {
    background-image:url('http://www.41q.org/admin/img/female.png');
}

$(function() {

    var $buttons = $("input[type='button']"),
        varval;

    $buttons.click(function() {

        // this should be done using a class to keep the js cleaner
        $(this).parent().siblings('.bx, #bxGender .gender').css({
            'background': '#2F2F2F',
            'color': '#fff'
        });

        $buttons.removeClass('button-toggle-on');
        $(this).addClass('button-toggle-on');

        $("#gender").val($(this).val());
    });
});​