jQuery：クリック時に選択した値をフェードイン

Question

5つの値を持つ選択したボックスがあります。私はボックスで選択されているものの入力をフェードインしようとしています。例：input1が選択されている場合、click1で入力1をフェードインします。ここで

は私がやろうとしているものです：

$(document).ready(function(){ 
    $('.btn').click(function() { 
       if($("#selectbox").value == 'Input1') { 
      $(".input1").show(); 
     } else if($("#selectbox").value == 'Input2') { 
      $(".input2").show(); 
     } else if($("#selectbox").value == 'Input3') { 
      $(".input3").show(); 
     } else if($("#selectbox").value == 'Input4') { 
      $(".input4").show(); 
     } else if($("#selectbox").value == 'Input5') { 
      $(".input5").show(); 
     } 
    } 
}); 

そして、ここでは動作しないフィドルです：

http://jsfiddle.net/rzMHJ/

Answer 1

あなたのコードでは、2個のエラーを持っており、そのが働いていない理由です。

1. $("#selectbox").value
   は、この例では、スイッチケースを使用することも);

とのより良い$("#selectbox").val()

あなたのクリックイベントを閉じていないはずです。

ワーキングデモ：（ニック・クレイバーズコメントに基づく）http://jsfiddle.net/naveen/Zn2yy/

更新

この特定のシナリオのために、あなたは多く、このようなコードを簡素化することができます。
デモ：http://jsfiddle.net/nick_craver/BWacA/

Answer 2

コードに問題が発生すると、2つの問題が発生します。

最初に、.valueをjQuery関数val()に置き換えます。

第2に、最後に}を最後に);を追加します。ここ

はリファクタリングコード動作している：私は（少なくとも私には）を主張したい

$(document).ready(function() { 
    $('.btn').click(function() { 
     var show = "." + $("#selectbox").val().toLowerCase(); 
     $(show).fadeIn(); 
    }); 
});