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>

最初只显示价格。为什么？

如何正确制作？块可以是无穷无尽的。

更新：

制作：

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

它是如何关联的？块可以是无穷无尽的。

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

参考：

• next().
• parseFloat().
• text().
• :text选择器。
• val().

Answer 2

您的代码正在搜索id = price您的 html 将价格作为类的位置。

基本上代替

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

你应该使用

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

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

更新：

根据编辑的代码：

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

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