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

我建议使用以下内容:

$('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 回答
1

您的代码正在搜索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)根据您的情况

于 2012-04-29T16:50:02.290 回答