Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Работа и инпутами и цифрами в цикле (https://javascript.ru/forum/dom-window/58317-rabota-i-inputami-i-ciframi-v-cikle.html)

Эдди 15.09.2015 11:41

Работа и инпутами и цифрами в цикле
 
Простейший вопрос ввел меня в ступор. Поиском ничего похожего не нашел. Даже не знаю, как вопрос сформулировать. Новичок в 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?

    });

Не знаю, правильно ли объяснил, что мне надо.

sanmihan 15.09.2015 12:04

Как вариант
$('div').on('change paste keyup', 'input.inpt', function() {
    //Вот здесь с введенным значением в поле инпут все понятно.
    var i = this.id.replace("inp", "")
    ...
});

Эдди 15.09.2015 12:12

Цитата:

Сообщение от sanmihan (Сообщение 388683)
Как вариант
$('div').on('change paste keyup', 'input.inpt', function() {
    //Вот здесь с введенным значением в поле инпут все понятно.
    var i = this.id.replace("inp", "")
    ...
});

Правильно понял? Вырезаем значение переменной из id?
В принципе, я только этот вариант и видел.
Но решил, что криво будет.
Должно же быть "красивое" решение. :)

sanmihan 15.09.2015 12:27

Цитата:

Сообщение от Эдди
Правильно понял? Вырезаем значение переменной из id?

Да правильно.
Есть вариант добавит инпутам атрибут, и тогда доставать значение из этого атрибута.

Эдди 15.09.2015 12:32

Цитата:

Сообщение от sanmihan (Сообщение 388691)
Да правильно.
Есть вариант добавит инпутам атрибут, и тогда доставать значение из этого атрибута.

Какой атрибут? Может, в name забить цифери? :)
Благо name не использую в этом скрипте.
Есть еще вариант в value забить переменную.
А в функции в самом начале ее вынуть и обнулить инпут до выполнения других действий.
Вот это более красиво. Нет?

Ща профессора придут и нам по шее надают за такие изголения. :)

рони 15.09.2015 12:47

Цитата:

Сообщение от Эдди
перемножалось на уже имеющееся число в поле num той же строки

а куда результат умножения?

Эдди 15.09.2015 13:02

Цитата:

Сообщение от рони (Сообщение 388698)
а куда результат умножения?

В то же после с тем же числом. Приращивание числа.
Потом оттуда забирать буду.

Но суть не в этом.
По опыту php знаю, что подобные случаи будут на каждом шагу появляться.
Хотелось бы знать, как правильно.

рони 15.09.2015 13:35

Эдди,
не осилил.

Эдди 15.09.2015 13:37

Цитата:

Сообщение от рони (Сообщение 388713)
Эдди,
не осилил.

Ну так вопрос не в том, куда результат.
ВОпрос в том, как лучше передать переменную, прилепленную к id или другому атрибуту в функцию.
И вообще как это надо делать.

рони 15.09.2015 13:39

Эдди,
что мешает цифру сразу передать в функцию? когда вы формируите таблицу.
и никаких id и атрибутов не потребуется

Эдди 15.09.2015 14:08

Цитата:

Сообщение от рони (Сообщение 388716)
Эдди,
что мешает цифру сразу передать в функцию? когда вы формируите таблицу.
и никаких id и атрибутов не потребуется

Может, я правда ничего не понимаю. Или неверно обЪяснил.

На самом леле кроме двух ячеек есть еще и третья, с чекбоксом.
А также инпут, где указывается количество, скажем, товара.

Сначала формируется таблица товаров со стоимостью штуки.
Потом юзер чекбоксами выбирает нужные строки (товары) и стомость

1 штуки в поле num умножается на количество указанное количество.
(трудно со смартфона писать)

sanmihan 15.09.2015 14:44

если задать у каждого инпута уникальное имя в пределах строки, можно же получить родительский tr = $(this).closet("tr");
ну а остальные нужные поля $("input[name='имя поля']",tr)[0]

В общем логика такая, с помощью элемента с которого пришло событие определяем общего родителя для всех нужных элементов, с помощью родителя определяем нужные элементы\значения

рони 15.09.2015 14:50

Цитата:

Сообщение от Эдди
чекбоксом

чекбокс зачем? ноль штук значит не выбрал

рони 15.09.2015 14:50

sanmihan,
ненадо искать родителя если сам формируешь таблицу

Эдди 15.09.2015 15:04

Хм. Ща доеду, всеи попробую. Но чем так гемороиться, то лучше replace, если это не противоречит логике и правилам языка...

Эдди 15.09.2015 17:29

Цитата:

Сообщение от рони (Сообщение 388731)
чекбокс зачем? ноль штук значит не выбрал

Ну я ведь все упрощенно выше писал.
А вот набросок, что в конечном счете должно получиться.
Речь о нижней таблице доп. услуг.
Повторяю, это только набросок:

Эдди 15.09.2015 18:23

В общем, за отсутствием корректных вариантов (а я почти уверен, что такие существуют) сделал по первому ответу от sanmihan.
Это самый простейший вариант.
$('div').on('change paste keyup', 'input.ser_n', function() {
  alert($(this).attr('id').replace('serv_num',''));
});

Появится лучший вариант, изменю. Функция-то небольшая.
Спасибо всем!!!

рони 15.09.2015 18:51

Цитата:

Сообщение от Эдди
'change paste keyup'

== 'input'

Эдди 15.09.2015 18:56

Цитата:

Сообщение от рони (Сообщение 388768)
== 'input'

То есть заменить на input?
В поиске где-то читал, что, вроде, 'change paste keyup' не пропустит ни одного события.
Если я правильно понял, заменил на 'input', скрипт не работает. :(

'input.ser_n' - это класс. Не id, если это имеет значение.

ВСЕ РАБОТАЕТ с 'input'. Прошу прощения. Там кавычку удалил случайно.

рони 15.09.2015 19:03

Эдди,
а так ?
$('div input.ser_n').on('input',  function() {
  alert(this.id.replace('serv_num',''));
});

Эдди 15.09.2015 19:09

рони. и так работает:
$('div').on('input', 'input.ser_n', function() { });
И так и так правильно?

Эдди 15.09.2015 19:13

И последний вопрос новичка по моему случаю.
Цифра находится в ячейке таблицы <td>
Задавать id, чтобы работать с цифрой - это где надо задать id?
Не в ячейке же?
Правильно ли будет <span id="id" + i >?
Или обернуть цифру в div?
Напоминаю, таблица, где цифра, формируется динамически.

Эдди 15.09.2015 19:37

В общем, сам допер.
Пофигу так id <td>, <span> или <div>.
Я пытался по val() вытащить цифру, а надо было по .html()... :)

рони 15.09.2015 19:46

Цитата:

Сообщение от Эдди
а надо было по .html()

или text()

sanmihan 16.09.2015 07:15

Цитата:

Сообщение от Эдди
$('div').on('input', 'input.ser_n', function() { });
И так и так правильно?

Можно и $("table").on('input', 'input.ser_n', function() { });
тогда обработчик будет только на таблицах, а не на всех дивах

sanmihan 16.09.2015 07:19

Как я понял рони намекал на то чтобы инпут выглядел примерно так <input oninput="something(i)"> или нет?

рони 16.09.2015 07:25

sanmihan,

$('div input.ser_n').on('input',  function() { 
  alert(this.id.replace('serv_num','')); 
});

условно
было так

$('div input.ser_n').on('input', function() {
alert(нужная цифра);
});

Эдди 16.09.2015 09:09

Да. рони имел в виду 'change paste keyup' == 'input'.
Я заменил, и все ок.
А по первоначальному запросу использовал, как
sanmihan
ответил - replace. Тоже все работает.

ТОЛЬКО, С**КА, дублируются записи, потому умножение просхдодит три раза в таблицу.
Как там испольвать complete: не знаю. Рою интернет. Ничего путного не нашел.

Вообще странно. Таблица выводится один раз, а когда умножаю инпут на текст той же строки, умножается три раза.

Эдди 16.09.2015 20:09

БЛН. Опять затык. Надеюсь, последний.

Напомню. В динамической таблице с перечислением услуг всем услугам присвоен класс 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 человека на вводимое кол-во людей
});

рони 16.09.2015 21:14

Эдди,
$('input.ser_n').on('input',  function() {

так пробовали?

рони 16.09.2015 21:16

Цитата:

Сообщение от Эдди
Но поскольку услуги в данном случае 3, то умножается 3 раза.

значит назначено 3 раза одно и тоже

рони 16.09.2015 21:18

Эдди,
5 строка стирает значение 4 строки - это нормально? то есть ошибок быть не может при вводе?

Эдди 16.09.2015 21:50

Цитата:

Сообщение от рони (Сообщение 388893)
Эдди,
$('input.ser_n').on('input',  function() {

так пробовали?

Попробовал. Так вообще не реагирует.
Но я это завтра добью.
Ведь в первой таблице у меня куча строк, а ниже приведенная функция только на одну строку реагирует и все правильно отдает.
Просто там тег <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> не выполнял свою основную функцию
    });

Эдди 16.09.2015 21:52

Цитата:

Сообщение от рони (Сообщение 388896)
Эдди,
5 строка стирает значение 4 строки - это нормально? то есть ошибок быть не может при вводе?

Сделал алерты. Три раза выводит одно и то же, но конечно же, три раза умножением сумма растет в геометрической прогрессии.

Эдди 17.09.2015 07:39

В общем выяснил совершенно точно, убрав все лишнее из скрипта.
Если работаешь с <a> = OK
$('div').on('click', 'a.sern', function() {
      alert('OK'); // ОДИН РАЗ
      return false;
    });

Меняешь на <input> = Черт бы его побрал, выводит многократно.
$('div').on('input', 'input.sern', function() {
      alert('OK'); // НЕСКОЛЬКО РАЗ
      return false;
    });

Буду искать как под инпут заголовок функции написать... :-E

рони 17.09.2015 12:30

Эдди,
делайте минимальный макет, иначе можно только гадать что и как у вас.

Эдди 17.09.2015 14:07

:victory:
Цитата:

Сообщение от рони (Сообщение 388961)
Эдди,
делайте минимальный макет, иначе можно только гадать что и как у вас.

Абсолютно все удалил лишнее.
Совершенно точно, меняю инпут на а, все великолепно. Обратно - все "размножается"' :) В общем буду за компом, слелаю на чистом js без классов, а с ай пи Правда, придется вынести все за функцию jquery.

Надеюсь мою функцию кто поможет перевести в jquery, чтобы было совсем айс...

Эдди 17.09.2015 14:08

У меня jquery 1.11. От этого не зависит?

рони 17.09.2015 15:35

Цитата:

Сообщение от Эдди
У меня jquery 1.11. От этого не зависит?

нет

Эдди 17.09.2015 21:52

Вечер добрый.
Вот такую идиотскую функцию, написанную на 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.