-2

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

但仅适用于第一个输入，而不适用于具有相同输入 ID 的其他输入

这是现场演示

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

请问有人可以帮助我吗？

4

3 回答 3

3

首先关。ID's在一个HTML页面中应该是唯一的。

改用类。

  • 避免使用内联样式，使用 CSS 来保持 HTML 干净。
  • 在更改处理程序内部，$(this)用于定位触发事件的元素。
  • 使用on而不是live现在已弃用。

JS

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

HTML

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

CSS

.round_inputs {
    text-align:right
}

检查小提琴

于 2015-08-13T17:59:50.730 回答
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()开始，已弃用jQuery .on()，因此请考虑相应地更新您的代码。

于 2015-08-13T18:00:02.730 回答
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/

于 2015-08-13T17:59:42.010 回答