0

このスクリプトにさらに3つのボタンを追加して、合計5つにする必要があります。

最初に2つのボタンのスクリプトを作成しましたが、次に3つ追加する必要があります。

私はこの部分だけに関心がありますか？これは私が変更する必要がある唯一の領域ですか？

    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

私があなたのコードから得ているものから、あなたは今2つのボタンを持っています：MaleとFemale。いずれかをクリックすると#gender、クラスがあるかどうかに応じて、要素の値が男性または女性に変更されます。

性別にさらに3つの可能な値を追加したいので、3つの新しいボタンを追加したいと思います。その場合は、コード内に変更が必要な重要な場所があります。

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

現在、正しい値を決定するために三項演算子を使用しています。元の2つではなく5つの可能な値を見ていると、それは汚くなるでしょう。

HTMLの変更を除いて、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 に答える