jQuery的KEYUP - 不可見的第二輸入

HTML：jQuery的KEYUP - 不可見的第二輸入

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

價格僅在第一個顯示。爲什麼？

如何正確製作？塊可以是無止境的。

UPDATE：

品牌：

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

它是如何關聯？塊可以是無止境的。

來源

2012-04-29 Михаил Дмитриев

你試圖找到價格'ID'，當你有價格作爲HTML – anson

我應該看到您的留言'class';）+1 – mprabhat

不，'price'絕對是一個'ID '（在編輯之後）。雖然它應該是一個'班級'，因爲['文件中必須是唯一的]（http://www.w3.org/TR/html401/struct /global.html#h-7.5.2）。 –

您的代碼正在搜索id = price，因爲您的html的價格與類一樣。的

基本上代替

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

你應該使用

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

#用於id選擇和.用於類選擇

更新：

按編輯代碼：

在你的html中有兩個具有相同ID的div，而每個元素應該有一個唯一的ID。請更改元素的ID是唯一可價格1，price2然後用

jQuery('#price1').text(value)或jQuery('#price2').text(value)按你的情況

來源

2012-04-29 16:50:02 mprabhat

它沒有幫助。 –

因爲你編輯了這個問題，所以'price'是'id'而不是'class'。而且，順便說一句，[文件中必須是唯一的]（http://www.w3.org/TR/html401/struct/global.html#h-7.5.2）。對於這個用例，它*應該*是一個'class'。 –

@МихаилДмитриев可能是因爲你沒有改變你的html。 – Shikiryu

我建議使用如下：

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

JS Fiddle demo。

jQuery的，onkeyup，採取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-29 16:59:10

不適用於塊生成器。 =（ –

jQuery的KEYUP - 不可見的第二輸入

回答

相關問題