jQuery keyup - 不可见的第二个输入

Question

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>

Price is only displayed at first. Why?

How it is correct to make? Blocks can be endless.

UPDATE:

Make:

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

How it associate? Blocks can be endless.

Answer 1

Your code is searching for id = price where as your html has price as class.

Basically instead of

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

you should be using

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

# is used for id selector and . is used for class selector

Update:

As per edited Code:

In your html there are two div with the same id, whereas every element should have a unique id. Please change id of the element to be unique may be price1, price2 and then use

jQuery('#price1').text(value) or jQuery('#price2').text(value) as per your case

Answer 2

I'd suggest using the following:

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

JS Fiddle demo .

The jQuery, onkeyup , takes the current user-entered value of the input , parses it to make sure it's a number, and then updates the next sibling-element that matches the supplied selector ( .price ) of the text-input, with the calculated number.

The above uses corrected, and now-valid, 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>​

References:

• next() .
• parseFloat() .
• text() .
• :text selector .
• val() .