如何使用相同的ID舍入多个输入?

时间:2015-08-13 17:56:24

标签: javascript jquery jquery-1.6

我使用 JQUERY 1.6 编写了一个脚本来循环输入,所以当我输入一个长数字时,我的脚本将自动舍入2位小数。

但是只能使用第一个输入,而不能使用具有相同输入ID的其他输入

以下是live demo

<script>
jQuery("#round_inputs").live("change", function(){
 input_values = parseFloat(jQuery("#round_inputs").val());
 if (isNaN(input_values)) input_values = "";
 jQuery("#round_inputs").val(input_values.toFixed(2));  
});  
</script>

<input id="round_inputs" size="20" style="text-align:right" type="text"/><br/>
<input id="round_inputs" size="20" style="text-align:right" type="text"/><br/>
<input id="round_inputs" size="20" style="text-align:right" type="text"/><br/>

请有人帮助我吗?

3 个答案:

答案 0 :(得分:3)

首先关闭。 <{1}}页面中的ID's应该是唯一的。

改用类。

  • 避免使用内联样式,使用CSS保持HTML清洁。
  • 在更改处理程序内部使用HTML来定位触发事件的元素。
  • 使用$(this)代替现已弃用的on

<强> JS

live

HTML

$(".round_inputs").on("change", function () {
    var input_values = parseFloat($(this).val());
    if (isNaN(input_values)) input_values = "";
    $(this).val(input_values.toFixed(2));
});

<强> CSS

<input class="round_inputs" size="20" type="text" />
<br/>
<input class="round_inputs" size="20" type="text" />
<br/>
<input class="round_inputs" size="20" type="text" />
<br/>

<强> Check Fiddle

答案 1 :(得分:3)

正如评论中指出的那样,ID 必须是唯一的,因此请改用类。并且您需要使用jQuery(this)来引用每个输入,否则您只是引用类的第一个元素:

jQuery(".round_inputs").live("change", function () {
    input_values = parseFloat(jQuery(this).val());
    if (isNaN(input_values)) input_values = "";
    jQuery(this).val(input_values.toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<input class="round_inputs" size="20" style="text-align:right" type="text" />
<br/>
<input class="round_inputs" size="20" style="text-align:right" type="text" />
<br/>
<input class="round_inputs" size="20" style="text-align:right" type="text" />

此外,从jQuery 1.7 .live()开始,我们已弃用.on(),因此请考虑相应地更新您的代码。

答案 2 :(得分:2)

使用ID选择器时,jQuery只返回第一个实例。您应该使用类名选择器:

 <input id="round_input1" class="round-input" size="20" style="text-align:right" type="text"/><br/>

将您的jQuery选择器更改为:jQuery('.round-input')

https://api.jquery.com/id-selector/