Question

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

是否需要重写整个脚本，还是只需添加更多DIV类？不确定如何approch。在这工作了好几天......

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

Answer 1

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

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

你应该做

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

并尝试将克隆很好地嵌套，即使它在这里复制得很糟糕，有时甚至只有几个空格在这里有所帮助：）

在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（）; <简单地检索值。 / p>

$(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代码并将背景定位移动到类按钮 - 当需要应用背景位置时，按钮开启。

向脚本添加更多子项

1 个答案: