2012-04-29 12 views
0

HTML:jQueryのkeyUpイベント - 見えない第二の入力

<div id="block"> 
<input type="text" value="1" id="number" /> 
<div id="price"></div> 
</div> 
<div id="block"> 
<input type="text" value="1" id="number" /> 
<div id="price"></div> 
</div> 

のjQuery:

<script type="text/javascript"> 
    $(function() { 
     $("#number").keyup(function() { 
      var value = $(this).val()*5; 
      $("#price").text(value); 
     }).keyup(); 
    }); 
</script> 

価格は、最初に表示されます。どうして?

どうすれば正しいですか? ブロックは無限にすることができます。

UPDATE:

メイク:それはどのように関連付ける

var id = 1; 
$('.number').each(function() { 
    $(this).attr('id', 'id_' + id++); 
}); 

? ブロックは無限にすることができます。

+1

あなたはあなたが私はあなたのコメントを見ている必要がありますHTML – anson

+0

で 'class'ような価格を持っている場合、価格の' ID'を見つけよう;)+1 – mprabhat

+0

いいえ、 'price'は間違い' IDです'(編集後に)。 ***が***クラス***であるべきですが、***はドキュメント内で一意でなければなりません。*** http://www.w3.org/TR/html401/struct /global.html#h-7.5.2)。 –

答えて

1

お客様のコードは、id = priceを検索しています.htmlの価格は、クラスとして料金が設定されています。基本的には代わりに

$("#price").text(value); 

のあなたは

$(".price").text(value); 

#を使用する必要があります

はIDセレクタのために使用され、.

更新クラスセレクタのために使用されている:1として

編集コード:

あなたのhtmlには同じIDを持つ2つのdivがありますが、すべての要素には一意のIDが必要です。 、price1することができるユニークである要素のidを変更price2し、その後、私は、以下のものを使用してお勧めする、あなたのケース

+0

それは役に立たなかった。 –

+2

あなたは 'price'を' class'ではなく 'id'にするように質問を編集したので、そして、ちなみに、[id' *** ***はドキュメント内で一意でなければなりません](http://www.w3.org/TR/html401/struct/global.html#h-7.5.2)。このユースケースについては、 'class'でなければなりません。 –

+0

@МихаилДмитриевあなたは結果的にあなたのHTMLを変更しなかったかもしれないからかもしれません。 – Shikiryu

1

あたりとして

jQuery('#price1').text(value)またはjQuery('#price2').text(value)を使用してください:

$('input:text.number').keyup(
    function() { 
     var v = parseFloat($(this).val()), 
      s = v*5; 
     $(this).next('.price').text(s); 
    });​ 

JS Fiddle demo

のjQuery、onkeyupは、inputの現在のユーザが入力した値をとり、それは数だし、次いで供給セレクタ(.price)に一致する次の兄弟要素を更新することを確認し、それを解析してテキスト入力の計算された数で計算されます。

修正上記の使用、そして今、有効な、HTML:

<div class="block"> 
    <input type="text" value="1" class="number" /> 
    <div class="price"></div> 
</div> 
<div class="block"> 
    <input type="text" value="1" class="number" /> 
    <div class="price"></div> 
</div>​ 

参考文献:

+0

ブロックジェネレータでは機能しません。 =( –