0

HTML：

<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>

価格は最初にのみ表示されます。なんで？

作るのはどのように正しいですか？ブロックは無限にすることができます。

アップデート：

作る：

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

どのように関連付けますか？ブロックは無限にすることができます。

4

2 に答える 2

1

id = priceあなたのコードは、あなたのhtmlがクラスとして価格を持っている場所を探しています。

基本的に代わりに

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

あなたが使用する必要があります

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

#IDセレクターに.使用され、クラスセレクターに使用されます

アップデート：

編集されたコードに従って：

HTML には同じ ID を持つ 2 つの div がありますが、すべての要素には一意の ID が必要です。要素の ID を一意になるように変更してください (price1、price2 など)。

jQuery('#price1').text(value)またはjQuery('#price2').text(value)あなたの場合に応じて

于 2012-04-29T16:50:02.290 に答える
1

以下を使用することをお勧めします。

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

JS フィドルのデモ。

jQueryonkeyupは、現在ユーザーが入力した の値を取得し、それを解析してそれが数値であることを確認し、テキスト入力の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>​

参考文献:

于 2012-04-29T16:59:10.687 に答える