Работа и инпутами и цифрами в цикле
Простейший вопрос ввел меня в ступор. Поиском ничего похожего не нашел. Даже не знаю, как вопрос сформулировать. Новичок в JS, что скажешь.
Динамически на страницу выводится таблица. В каждой строке в первой ячейке цифра, во второй инпут. Выводится циклом for ( var i=0; i < data.lenght ; $i++) Везде есть id. У цифры, скажем - id="num" + i, У импута - id="inp" + i. Инпут еще в диве и имеет класс class="inpt". Привожу очень упрощенно. Jquery надо сделать функцию, чтобы при введении в инпут числа, оно перемножалось на уже имеющееся число в поле num той же строки. Функция такая: $('div').on('change paste keyup', 'input.inpt', function() { //Вот здесь с введенным значением в поле инпут все понятно. //А как получить как значение i, чтобы перемножить на цифру именно нужной строки, подставив в id значение i? }); Не знаю, правильно ли объяснил, что мне надо. |
Как вариант
$('div').on('change paste keyup', 'input.inpt', function() { //Вот здесь с введенным значением в поле инпут все понятно. var i = this.id.replace("inp", "") ... }); |
Цитата:
В принципе, я только этот вариант и видел. Но решил, что криво будет. Должно же быть "красивое" решение. :) |
Цитата:
Есть вариант добавит инпутам атрибут, и тогда доставать значение из этого атрибута. |
Цитата:
Благо name не использую в этом скрипте. Есть еще вариант в value забить переменную. А в функции в самом начале ее вынуть и обнулить инпут до выполнения других действий. Вот это более красиво. Нет? Ща профессора придут и нам по шее надают за такие изголения. :) |
Цитата:
|
Цитата:
Потом оттуда забирать буду. Но суть не в этом. По опыту php знаю, что подобные случаи будут на каждом шагу появляться. Хотелось бы знать, как правильно. |
Эдди,
не осилил. |
Цитата:
ВОпрос в том, как лучше передать переменную, прилепленную к id или другому атрибуту в функцию. И вообще как это надо делать. |
Эдди,
что мешает цифру сразу передать в функцию? когда вы формируите таблицу. и никаких id и атрибутов не потребуется |
Цитата:
На самом леле кроме двух ячеек есть еще и третья, с чекбоксом. А также инпут, где указывается количество, скажем, товара. Сначала формируется таблица товаров со стоимостью штуки. Потом юзер чекбоксами выбирает нужные строки (товары) и стомость 1 штуки в поле num умножается на количество указанное количество. (трудно со смартфона писать) |
если задать у каждого инпута уникальное имя в пределах строки, можно же получить родительский tr = $(this).closet("tr");
ну а остальные нужные поля $("input[name='имя поля']",tr)[0] В общем логика такая, с помощью элемента с которого пришло событие определяем общего родителя для всех нужных элементов, с помощью родителя определяем нужные элементы\значения |
Цитата:
|
sanmihan,
ненадо искать родителя если сам формируешь таблицу |
Хм. Ща доеду, всеи попробую. Но чем так гемороиться, то лучше replace, если это не противоречит логике и правилам языка...
|
Цитата:
А вот набросок, что в конечном счете должно получиться. Речь о нижней таблице доп. услуг. Повторяю, это только набросок: ![]() |
В общем, за отсутствием корректных вариантов (а я почти уверен, что такие существуют) сделал по первому ответу от sanmihan.
Это самый простейший вариант. $('div').on('change paste keyup', 'input.ser_n', function() { alert($(this).attr('id').replace('serv_num','')); }); Появится лучший вариант, изменю. Функция-то небольшая. Спасибо всем!!! |
Цитата:
|
Цитата:
В поиске где-то читал, что, вроде, 'change paste keyup' не пропустит ни одного события. Если я правильно понял, заменил на 'input', скрипт не работает. :( 'input.ser_n' - это класс. Не id, если это имеет значение. ВСЕ РАБОТАЕТ с 'input'. Прошу прощения. Там кавычку удалил случайно. |
Эдди,
а так ? $('div input.ser_n').on('input', function() { alert(this.id.replace('serv_num','')); }); |
рони. и так работает:
$('div').on('input', 'input.ser_n', function() { }); И так и так правильно? |
И последний вопрос новичка по моему случаю.
Цифра находится в ячейке таблицы <td> Задавать id, чтобы работать с цифрой - это где надо задать id? Не в ячейке же? Правильно ли будет <span id="id" + i >? Или обернуть цифру в div? Напоминаю, таблица, где цифра, формируется динамически. |
В общем, сам допер.
Пофигу так id <td>, <span> или <div>. Я пытался по val() вытащить цифру, а надо было по .html()... :) |
Цитата:
|
Цитата:
тогда обработчик будет только на таблицах, а не на всех дивах |
Как я понял рони намекал на то чтобы инпут выглядел примерно так <input oninput="something(i)"> или нет?
|
sanmihan,
$('div input.ser_n').on('input', function() { alert(this.id.replace('serv_num','')); }); условно было так $('div input.ser_n').on('input', function() { alert(нужная цифра); }); |
Да. рони имел в виду 'change paste keyup' == 'input'.
Я заменил, и все ок. А по первоначальному запросу использовал, как sanmihan ответил - replace. Тоже все работает. ТОЛЬКО, С**КА, дублируются записи, потому умножение просхдодит три раза в таблицу. Как там испольвать complete: не знаю. Рою интернет. Ничего путного не нашел. Вообще странно. Таблица выводится один раз, а когда умножаю инпут на текст той же строки, умножается три раза. |
БЛН. Опять затык. Надеюсь, последний.
Напомню. В динамической таблице с перечислением услуг всем услугам присвоен класс ser_n. Каждая услуга имеет id="serv_num" + i (выводятся в цикле). Задача при вводе в инпут умножить число на стоимость услуги на 1 человека. Все умножается. Но поскольку услуги в данном случае 3, то умножается 3 раза. Как бы исправить функцию, чтобы умножение было только один раз. Конечно, можно сделать цикл с одной итерацией или прерыванием после первой итерации. Но криво будет, уверен. $('div').on('input', 'input.ser_n', function() { var $s = $(this).val(); //вводимое число var $x = $(this).attr('id').replace('serv_num',''); //порядковый номер услуги var $y = $('#serv_c' + $x).text(); //получаю стоимость услуги на 1 человека $('#serv_c' + $x).text($y * $s); //умножаю стоимость на 1 человека на вводимое кол-во людей }); |
Эдди,
$('input.ser_n').on('input', function() { так пробовали? |
Цитата:
|
Эдди,
5 строка стирает значение 4 строки - это нормально? то есть ошибок быть не может при вводе? |
Цитата:
Но я это завтра добью. Ведь в первой таблице у меня куча строк, а ниже приведенная функция только на одну строку реагирует и все правильно отдает. Просто там тег <a>, а здесь <input>. Там click, здесь input. Буду пробовать методом постепенного замещения, начиная с <a>. $('div').on('click', 'a.crt', function() { startLoadingAnimation(); //запускаем анимацию загрузки //Получаем значение атрибута href и выбираем только параметры в массиве var params = $(this).attr('href').split('?'); alert(params[1]); stopLoadingAnimation(); //останавливаем анимацию загрузки return false; //чтобы тег <a> не выполнял свою основную функцию }); |
Цитата:
|
В общем выяснил совершенно точно, убрав все лишнее из скрипта.
Если работаешь с <a> = OK $('div').on('click', 'a.sern', function() { alert('OK'); // ОДИН РАЗ return false; }); Меняешь на <input> = Черт бы его побрал, выводит многократно. $('div').on('input', 'input.sern', function() { alert('OK'); // НЕСКОЛЬКО РАЗ return false; }); Буду искать как под инпут заголовок функции написать... :-E |
Эдди,
делайте минимальный макет, иначе можно только гадать что и как у вас. |
:victory:
Цитата:
Совершенно точно, меняю инпут на а, все великолепно. Обратно - все "размножается"' :) В общем буду за компом, слелаю на чистом js без классов, а с ай пи Правда, придется вынести все за функцию jquery. Надеюсь мою функцию кто поможет перевести в jquery, чтобы было совсем айс... |
У меня jquery 1.11. От этого не зависит?
|
Цитата:
|
Вечер добрый.
Вот такую идиотскую функцию, написанную на JS кто-нибудь может "перевести" на jquery? Иначе мне приходится ее выносить за весь jquery script. Здорово это или не здорово - не знаю. Но хотелось бы все на jquery. function servn(n) { var x = document.getElementById('serv_c' + n).innerHTML; var y = document.getElementById('serv_n' + n).value; z = x * y; document.getElementById('serv_c' + n).innerHTML = z; } Вот html: <table> <tr> <td id="serv_c0">10</td> <td><input id="serv_n0" oninput="servn(0)"></td> </tr> <tr> <td id="serv_c1">10</td> <td><input id="serv_n1" oninput="servn(1)"></td> </tr> <tr> <td id="serv_c2">10</td> <td><input id="serv_n2" oninput="servn(2)"></td> </tr> </table> Вот пример. Таблица написана на php для быстроты. Но мог бы написать и на html. Могла бы быть и динамической, как у меня в основном скрипте. Хочется закрыть нафиг эту тему (извините, устал от таких простых вещей). http://booking.intomega.com/test.php Или оставить эту функцию без jquery? Работает ведь... :-E |
Часовой пояс GMT +3, время: 12:07. |