0

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

$(function() {
    var argument = $('input[name="data[Destination][argument]"]')
      , result = $('input[name="data[Destination][result]"]')
      , multiplier = parseInt($('input[name="data[Destination][multiplier]"]').val(), 10);
    argument.on('input', function() {
      result.val($(this).val() * multiplier);
    });
  });     
})(jQuery);

Проблема в том, что блок инпутов внутри формы содержится в модальном высплывающем окошке, и таких окошек на странице десятки. Само всплывающее окошко открывается при клике по ссылке на странице. В укороченном варианте выглядит как-то так (все одинаковое кроме id дива с модальником):

   <div id="myModal1">
   <input name="data[Destination][argument]"/> 
   <input name="data[Destination][multiplier]"/>
   <input name="data[Destination][result]"/>
   </div>
   ...
   <div id="myModal25">
   <input name="data[Destination][argument]"/> 
   <input name="data[Destination][multiplier]"/>
   <input name="data[Destination][result]"/>
   </div>

Как поправить js так, чтобы он работал внутри определенного вспл.окошка (не дублируя js в каждое вспл.окно), именно того, которое сейчас открыто?

1 ответ 1

0

HTML - Добавить каждому модальному окну общий класс

<div class="my_modal" id="myModal1">
    <input name="data[Destination][argument]"/>
    <input name="data[Destination][multiplier]"/>
    <input name="data[Destination][result]"/>
</div>
...
<div class="my_modal" id="myModal25">
    <input name="data[Destination][argument]"/>
    <input name="data[Destination][multiplier]"/>
    <input name="data[Destination][result]"/>
</div>

JavaScript

$(document).on('input', 'input', function () {
    var $modal = $(this).parents('.my_modal');

    var result = $modal.find('input[name="data[Destination][result]"]');
    var argument = parseInt($modal.find('input[name="data[Destination][argument]"]').val(), 10);
    var multiplier = parseInt($modal.find('input[name="data[Destination][multiplier]"]').val(), 10);

    result.val(+argument * +multiplier);
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.