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

价格仅首先显示。为什么？

如何正确制作？ block 可以是无限的。

更新:

品牌:

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

如何关联？ block 可以是无限的。

Answer 1

您的代码正在搜索id = Price，因为您的html将价格作为类。

基本上代替

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

你应该使用

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

# 用于 id 选择器，. 用于类选择器

更新:

根据编辑的代码:

在你的html中有两个div具有相同的id，而每个元素都应该有一个唯一的id。请将元素的id更改为唯一，可能是price1、price2，然后使用

jQuery('#price1').text(value) 或 jQuery('#price2').text(value) 根据您的情况