Изменить значение первого входа итерации с входным значением следующей итерации

Question

Структура Концепция: -
В принципе, я пытаюсь создать модальное окно, содержащее вход и модальное окно в настоящее время срабатывает, когда вход на главную страницу сфокусироваться на том, что Я использовал атрибут data, чтобы создать связь между ними, назначив им одно и то же значение атрибута.

Javascript Концепция: -
для модального окна, я создал модальный объект. и объект модели содержит метод bindModal, который принимает один аргумент, и этот аргумент является значением атрибута данных. после принятия этого значения метод bindModal будет искать элементы dom, содержащие это конкретное значение, и после поиска я перебираю их по каждому циклу.

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

Я буду признателен всем вам, если ребята помочь мне сделать мой код более оптимизирован и хорошо структурирована и самое главное, что дайте мне знать, что ошибка, которую я сделал в общей работе Благодаря

JavaScript код

var modal = function() { 
    this.toggleModal = function() { 
     $('#modal').toggleClass('content--inActive').promise().done(function() { 
      $('#modal__close').on('click',function(){ 
       $('#modal').addClass('content--inActive'); 
      }); 
     }); 
    } 
    this.bindModal = function (bindVal) { 
     var bindValue = $(document).find('[data-modal-bind = ' + bindVal + ']'); 
     $.each(bindValue, function (index) { 
      var bind1 = $(this); 
      if(index === 1) { 
       var bind2 = $(this); 
       $(bind1).change(function(){ 
        $(bind2).val(bind1.val()); 
       }); 
      } 
     }); 

    } 
} 

var open = new modal(); 

$('#input_search').on('click',function(){ 
    open.toggleModal(); 
    open.bindModal('input'); 
}); 

Answer 1

Вот один из способов сделать то, что вы хотите:

var modal = function() { 
    this.bindModal = function(bindVal) { 
    var bindValue = $('[data-modal-bind = ' + bindVal + ']'); 
    bindValue.each(function(index) { 
     $(this).keyup(function() { 
     var value = $(this).val(); 

     bindValue.each(function(i, e) { 
      $(this).val(value); 
     }); 
     }); 
    }); 

    } 
} 

$('#input_search').on('click', function() { 
    var open = new modal(); 
    open.bindModal('input'); 
}); 

Изменения, сделанные:

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

Это позволяет вставлять входы во время ввода. Надеюсь, что решает вашу проблему.