-3

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

是否必须重新编写整个脚本或者我可以添加更多的 DIV 类？不知道如何接近。为此工作了几天...

这是我的链接：http: //jsfiddle.net/9cr4F/9/

HTML：

<div id="r6">    

<div class="bx bx1">6</div>
<div id="sp"></div>
<div class="bx bx2">Gender</div>
<div id="sp"></div>
<div id="bxGender">
<input type="button" class="gnM" >
<div id="sp"></div>
<input type="button" class="gnF">
<div id="sp"></div>
<input class="req-string gender"  id="gender" name="gender"></div>

</div>

CSS：

#r6 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.bx {
    height:60px;
    line-height:60px;
    float:left;
    font-size:105%;
    margin-top:15px;
    color: #000;
    background-color: #E8E8E8
}
.bx1 {
    width:60px;
    text-align:center
}
.bx2 {
    width:175px;
    padding-left:20px
}
#sp {
    width:  15px;
    height:60px;
    float:left;
}
.gnM {
    width:137px;
    height: 60px;
    background:#E8E8E8 url('http://www.41q.org/admin/img/male.png') 0px 0px no-repeat;
    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;
}
.gnF {
    width:137px;
    height: 60px;
    background:#E8E8E8 url('http://www.41q.org/admin/img/female.png') 0px 0px no-repeat;
    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;
}
#r6 #bxGender .button-toggle-on {
    background-position: 0 -120px
}
#bxGender {
    width:486px;
    height:60px;
    float:left;
    margin-top:15px
}

#r6:hover div.bx, #r6:hover input {background-color: #A9A9A9; cursor:pointer}
#r6:hover .gnM, #r6:hover .gnF {background-position: 0 -60px; cursor:pointer}

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);
    });
});
4

1 回答 1

0

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

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

你应该做

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

并尝试让克隆很好地嵌套，即使它在这里复制得很糟糕，有时它也有助于在这里和那里只有几个空格:)

如果您的 CSS 适用于多个元素，请不要在您的 CSS 中重复相同的属性，例如我重组了您的 gnF 和 gnM 类，因此所有属性都在一起，只有背景图像属性是分开的。

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

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

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

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

这是修改后的小提琴http://jsfiddle.net/9cr4F/14/ - 第三个按钮样式当然是搞砸了，但我相信它会给你你需要的东西:)

编辑：优化 CSS 多一点 编辑 2：优化 jquery 代码并将背景定位移动到类 button-toggle-on ，因为它在需要应用背景位置时处于打开状态。

于 2012-04-14T20:21:20.027 回答