使用下一次迭代输入值更改第一次迭代输入的值

Change value of first iteration input with next iteration input value

结构概念:-
基本上,我正在尝试创建包含输入的模态 window,并且当索引页面上的输入获得焦点时模态 window 当前会触发,因为我使用数据属性在两者之间创建 link通过为它们分配相同的属性值。

Javascript 概念:-
对于模态 window,我创建了模态对象。模型对象包含一个 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');
});

这是一种方法来做你想做的事:

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 中获取,然后使用内部循环将其分配给每个输入。

这使得输入在打字时同步。希望能解决您的问题。