Как можно округлить несколько входов с одинаковым идентификатором?

Я сделал скрипт, используя JQUERY 1.6 для округления ввода, поэтому, когда я набираю длинное число, мой скрипт автоматически округляет 2 десятичных знака.

Но работает только с первым входом и не работает с другими входами с таким же идентификатором ввода

Вот живая демонстрация

<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 ответа

Решение

Как было отмечено в комментариях, 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() так что подумайте об обновлении своего кода соответственно.

Источник

Прежде всего. 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
}

Проверьте скрипку

Источник

При использовании селекторов идентификаторов 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/

Источник
Другие вопросы по тегам