jQueryで複数の.clickを使うのに最も効率的なWyt

Question

私は意図したとおりに動作するシンプルなフォームを持っています。これは一度に1つの質問のみを表示する複数ステップのフォームです。ユーザーが入力フィールド（すべてのラジオボタン）をクリックすると、次の質問に移動します。これはクリックした内容によって異なります。最後に、最後の質問の後に送信ボタンが表示されます。
私は現在、いくつかの.click関数を持っていますが、これはうまくいきます。しかし、私はそれが執筆とパフォーマンスの面でこれを行う最も効率的な方法ではないと確信しています。複数の.click関数を使用するより効率的な方法はありますか？

$('.male').click(function() { 
    $('#male').show(); 
    $('#gender').hide(); 
}); 

$('.female').click(function() { 
    $('#female').show(); 
    $('#gender').hide(); 
}); 

Answer 1

あなたが質問のすべてを与えることができる「質問」して、各回答のクラスをクラス（または他の）表示したい今後の枝のプロパティに対応するIDを持つことができます。

したがって、それぞれの応答にはの次に表示するものの名​​前が保持され、1つのクリックハンドラしか持つことができません。

すなわち：

$("input").click(function() { 
    $(".question").hide(); 
    var itemToShow = $(this).attr("id"); 
    //alert(itemToShow); 
    if ($("."+itemToShow).length > 0) { 
     $("."+itemToShow).show("normal"); 
    } else { 
     $(".finale").show("normal"); 
    } 
}); 

あなたはおそらく、あなたが好きな制御が働くまでそれで少し遊んでする必要があります。ここにはfiddleがあります。

更新：最新のfiddle demonstrationです。あなたがこれを行うことができますバブリングによるイベントへ

Answer 2

彼らは彼らの両方が独自のクリックハンドラを必要とする上でクリックされたときに、あなたの#maleと#female要素の両方を実行するためのコードが必要であるため。ただし、これらのコードを同じセレクタに含めて、それらの両方を処理する単一の関数を呼び出すことで、このコードを単純化できます。これを試してみてください：

$(".male, .female").click(showDivs); 

function showDivs() { 
    if ($(this).hasClass("male")) { 
     $("#male").show(); 
    } 
    else { 
     $("#female").show(); 
    } 
    $("#gender").hide(); 
} 

Answer 3

：http://jsfiddle.net/748sE/2/

デフォルトの機能は何に戻ります、もちろん、すでにキャッチされていない、そのページをクリックしてください：

​$('body').on('click',function(e){ 
    switch ($(e.target).attr('class')){ 
     case "male": 
      $('#male').show(); 
      $('#gender').hide(); 
      break; 
     case "female": 
      $('#female').show(); 
      $('#gender').hide(); 
      break; 
     default: 
      alert("default function!"); 
      break;    
    } 
});​​​​​​ 

はこちらのデモです。 ..

デビッドトーマスは彼の答えで行ったようにところで、あなたは、それを少し最適化するために、e.target.classNameで$(e.target).attr('class')を置き換えることができます...

Answer 4

のような、あなたのHTMLに論理的な構造を想定していますそして、私は考えることができる最も簡単なオプションは以下の通りです

<form action="#" method="post"> 
    <fieldset> 
     <legend>Question 1: gender</legend> 
     <label for="m">Male</label> 
     <input type="radio" name="gender" id="m" /> 
     <label for="f">Female</label> 
     <input type="radio" name="gender" id="f" /> 
    </fieldset> 
    <fieldset> 
     <legend>Question title</legend> 
     <!-- answer options --> 
    </fieldset> 
    <!-- other questions... --> 
</form> 

：

$('form').on('click','input', 
       function(){ 
        var fieldset = $(this).closest('fieldset'); 
        fieldset.fadeOut(500, 
         function(){ 
          fieldset.next('fieldset').fadeIn(500); 
         }); 
       });​ 

JS Fiddle demo。前の質問を見直す可能にするために

、私は次の行に沿って適応をお勧めしたい：

<form action="#" method="post"> 
    <fieldset> 
     <legend>Question 1: gender</legend> 
     <label for="m">Male</label> 
     <input type="radio" name="gender" id="m" /> 
     <label for="f">Female</label> 
     <input type="radio" name="gender" id="f" /> 
     <div class="controls"> 
      <a href="#" class="prev">Previous</a> 
      <a href="#" class="next">Next</a> 
     </div> 
    </fieldset> 
    <!-- other questions... --> 
</form> 

とjQueryと相まって：

$('fieldset').not($('fieldset:eq(0)')).hide(); 
$('.controls a.prev:first, .controls a.next:last').addClass('disabled'); 
$('form').on('click', 'input, a', function(e) { 
    var target = e.target, 
     targetType = target.tagName.toLowerCase(), 
     targetClass = target.className, 
     fieldset = $(this).closest('fieldset'), 
     prev = fieldset.prev().length, 
     next = fieldset.next().length; 

    if (targetType == 'input' && next > 0) { 
     fieldset.fadeOut(500, function() { 
      fieldset.next('fieldset').fadeIn(500); 
     }); 
    } 
    else if (targetType == 'a') { 
     if (targetClass == 'prev' && prev > 0) { 
      fieldset.fadeOut(500, function() { 
       fieldset.prev('fieldset').fadeIn(500); 
      }); 
     } 
     else if (targetClass == 'next' && next > 0) { 
      fieldset.fadeOut(500, function() { 
       fieldset.next('fieldset').fadeIn(500); 
      }); 
     } 
    } 
});​ 

JS Fiddle demoを。

参考文献：

1. jQueryのもの：

   • addClass()。
   • closest()。
   • fadeIn()。
   • fadeOut()。
   • next()。
   • not()。
   • on()。
   • prev()。

2. ネイティブJavaScriptのもの：

   • element.className。
   • e.target。
   • element.tagName。
   • toLowerCase()。また