Jqueryキーアップ複数入力

Question

誰かが入力を使用しているときにそれに対応するテキストが表示されるようにしようとしています。

<div class="content1" style="display: block;">Content 1</div> 
<div class="content2" style="display: none;">Content 2</div> 
<div class="content3" style="display: none;">Content 3</div> 
<div class="content4" style="display: none;">Content 4</div> 

<ul class="addReview"> 
     <li><p>Input 1</p><input type="text" name="input1" value="" id="input1" autocomplete="off" maxlength="2" /></li> 
     <li><p>Input 2</p><input type="text" name="input2" value="" id="input2" autocomplete="off" maxlength="2" /></li> 
     <li><p>Input 3</p><input type="text" name="input3" value="" id="input3" autocomplete="off" maxlength="2" /></li> 
     <li><p>Input 4</p><input type="text" name="input4" value="" id="input4" autocomplete="off" maxlength="2" /></li> 
    </ul> 

は、私は、各入力用からkeyup機能を行うだろうか、1からkeyup機能させる方法はありますか？

Answer 1

これはあなたの現在のマークアップのためにそれを行う必要があります。すべてのdivは、クラス「コンテンツ」を持っていたし、フォーム「content1」のid場合例えば、あなたがこれを行うことができます：

似ていますが、はるかに堅牢である

$('.addReview input[type="text"]').keyup(function() { 
    $('div.content').hide(); 
    $('#' + this.id.replace(/input/, "content")).show(); 
});​ 

（私はあなたのためにそれをやった方法現在のHTMLはdivを追加クラスに与える場合には壊れる可能性があります）。

デモ組み込む私の提案マークアップの変更：適切なDIVをユーザーがクリックするか、タブとすぐに表示されるようにhttp://jsfiddle.net/WD3CU/1/

また、私の意見では、.keyup()ではなく.focus()イベントを使用する方が理にかなって入力の1つに入力します。

Answer 2

HTMLアーキテクチャを少し変更する必要があります。このように変更します。

<div class="content" id="content_1" style="display: none;">Content 1</div> 
<div class="content" id="content_2" style="display: none;">Content 2</div> 
<div class="content" id="content_3" style="display: none;">Content 3</div> 
<div class="content" id="content_4" style="display: none;">Content 4</div> 

<ul class="addReview"> 
    <li><p>Input 1</p><input type="text" class="input" name="input_1" value="" id="input_1" autocomplete="off" maxlength="2" /></li> 
    <li><p>Input 2</p><input type="text" class="input" name="input_2" value="" id="input_2" autocomplete="off" maxlength="2" /></li> 
    <li><p>Input 3</p><input type="text" class="input" name="input_3" value="" id="input_3" autocomplete="off" maxlength="2" /></li> 
    <li><p>Input 4</p><input type="text" class="input" name="input_4" value="" id="input_4" autocomplete="off" maxlength="2" /></li> 
</ul>​ 

あなたは、あなたが何をしようとして達成するために、次のjQueryコードを使用することができます：JSFiddle demo作業

$(".input").keyup(function() { 
    var curId = this.id.split("_")[1]; 
    $("#content_"+curId).html($(this).val()); 
    $("#content_"+curId).show(); 
});​ 

。

$('.addReview input[type="text"]').keyup(function() { 
    $('div[class^="content"]').hide(); 
    $('div.' + this.id.replace(/input/, "content")).show(); 
});​ 

デモ：http://jsfiddle.net/WD3CU/

をしかし、あなたはdiv要素に共通のクラスと異なるIDを与えた場合には、滑らかな印象になり

Answer 3

あなたはこの

$('.addReview input:text').keyup(function() { }); 

demo

またはこの

$('.addReview .mytextboxclass').keyup(function() { }); 

demo

かのように属性セレクタのようなクラスセレクタのように、共通のセレクタにバインドする必要がありnnnnnn's answer

$('.addReview input[type="text"]').keyup(function() { });​ 

demo