Входные данные jQuery обновляют все идентификаторы, а не только требуемый

Мне трудно объяснить проблему, но я повторил ее в jsFiddle http://jsfiddle.net/6ms4T/1/

Я пытаюсь добиться этого путем обновления текстового поля "Количество", которое я хочу отображать в другом месте (строка ниже, которую я буду называть "Строка стоимости").

В основном, обновление первого поля ввода (qty_item_1) обновляет все (quant_) Идентификаторы в строке "Стоимость", а не только те, которые связаны с этим продуктом.

function recalc(){

$("[id^=quant_]").text($("input[id^=qty_item_]").val());

так далее...

Полный код здесь: http://jsfiddle.net/6ms4T/1/

Любая помощь будет оценена.

Источник

4 ответа

Решение

Вы можете найти идентификатор элемента, который изменяется, а затем извлечь его часть из цифр для использования в остальных ваших вычислениях. Вот аспекты, которые я изменил, и рабочая версия:

var uniqueOne = $(this).attr("id").match(/\d+/);
$("[id^=quant_][id$="+uniqueOne+"]").text($("input[id^=qty_item_][id$="+uniqueOne+"]").val());

Хотя это не самый чистый код, он находит идентификаторы, которые начинаются с quant_ и заканчиваются uniqueOne. Вы могли бы, вероятно, сжать их, но это подчеркивает объединение двух селекторов (начинается с и заканчивается с).

Похоже, у тебя есть много отличных идей на выбор.

Редактировать:

Если ваш идентификатор не начинается с qty_item_, тогда вам нужно использовать другой селектор. Самый низко-висящий фрукт для этого будет содержать селектор: id*=blah,

Обновленная версия с "брутто" идентификаторами для поиска: http://jsfiddle.net/6ms4T/22/

Редактировать:

Предыдущий jsfiddle не обрабатывал обновление итогов, как ожидалось. Эта обновленная версия должна уменьшить путаницу, идентифицируя все случаи, когда элементы DOM ищутся по ID; Однако существует высокая вероятность того, что это должно быть рефакторинг: http://jsfiddle.net/6ms4T/24/.

РЕДАКТИРОВАТЬ:

В тегах ОП были различные цифры и буквы, сгенерированные в его идентификаторах, но последним цифрам предшествовал знак подчеркивания. Значительный идентификатор был найден с помощью регулярного выражения /\d+$/, Как показали другие плакаты, существует несколько способов решить эту проблему. Мне лично понравился пользовательский габициш.

Источник

Добавьте атрибут, который содержит информацию о ваших входных данных. Я добавил атрибут "rel" со ​​значением 1 для первого ввода и 2 для второго, а затем использовал этот rel для построения правильных идентификаторов для элементов li.

Вот обновленный рабочий jsFiddle: http://jsfiddle.net/6ms4T/8/

Источник

Измените начало функции recalc() следующим образом;

function recalc(e){
    var idx = $(e.target).attr('id').split('_').pop();
    $("[id^=quant_" + idx + "]").text($(e.target).val());

...}

Источник

Вы можете сделать вещи относительно краткими и применять события только к определенным элементам, идентифицируя числовой компонент id и затем использовать этот номер как часть селектора:

var idNum = this.id.match(/\d+/);
$("#quant_" + idNum).text($("#qty_item_" + idNum).val());

JS Fiddle demo.

Рекомендации:

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