-3

2 つのボタンで動作するクールなスクリプトがあります。全部で 5 つのオプションとして、さらに 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 は UNIQUE でなければなりません。

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

やったほうがいい

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

ここでコピーがうまくいかなくても、クローンをうまくネストするようにしてください:)

複数の要素に適用される場合、CSS で同じプロパティを繰り返さないでください。

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

ボタンの値属性を使用して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/ - 3番目のボタンのスタイリングはもちろんねじ込まれていますが、必要なものが得られると確信しています:)

編集: CSS をもう少し最適化 編集 2: jquery コードを最適化し、背景位置を適用する必要があるときにオンになっているクラスのボタン切り替えオンに背景位置を移動します。

于 2012-04-14T20:21:20.027 に答える