Триггер изменения или ввода, когда JavaScript изменяет значение ввода

Question

Я работаю в небольшом проекте с JQuery , и у меня возникла проблема с удалением классов ошибок из HTML-элементов.

Я использую $('selector').on('input'), чтобы получить событие и удалить класс input, моя проблема в том, что поле генерируется с помощью JavaScript;

Пример

  $('#one').on('input',function(){
        $('#two').val(  $('#one').val()  );
    });


    $(':input').on('input', function ()
    {
        if ($(this).hasClass('example'))
        {
            $(this).removeClass('example');
        }
    });

 .example
    {
        color: orange;
        background-color: black;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Normal Case</h2>
        <input type="text" class="example">

        <h2>Problem</h2>
        <label for="one">#ONE</label>
        <input type="text" class="example" id="one">
        <br/>
        <label for="two">#TWO</label>
        <input type="text" class="example" readonly="readonly" id="two">

В этом случае я изменяю значение #two, когда #one изменяется, #one удаляет .example, но #two не

Мне нужно удалить .example класс из #two input

РЕДАКТИРОВАТЬ: Я хочу сделать это в общих чертах, потому что у меня много этих случаев в моем проекте

Есть ли способ вызвать такие изменения?

Большое спасибо!

Answer 1

Вы можете проверить, является ли текущее поле #one, используя .is () :

$(':input').on('input', function () {


       if(($(this).is("#one"))) {

            if ($('#two').hasClass('example'))
            {
                $('#two').removeClass('example');
            }

       }

       if ($(this).hasClass('example'))
       {
           $(this).removeClass('example');
        }
});

Answer 2

Может быть, код, который я написал ниже, поможет вам. Это не идеально, но это хорошая отправная точка.
Я добавил пользовательский атрибут, который я назвал data-group для входов, принадлежащих к той же «группе».
Я также изменил слушателя для input таким образом, чтобы из одной функции слушателя вы могли прослушивать все входы.

Проверьте, поможет ли это вам.

$('.example').on('input',function(){
    var value = this.value; 
    var groupName = $(this).attr('data-group');
    var groupElems = $("[data-group='"+groupName+"']");
    groupElems.removeClass('example');
    groupElems.val(value);
});

.example
    {
        color: orange;
        background-color: black;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Problem</h2>
<label for="one">#ONE</label>
<input type="text" class="example" data-group="group1" id="one">
<br/>
<label for="two">#TWO</label>
<input type="text" class="example" data-group="group1" readonly="readonly" id="two">

        <h2>Problem</h2>
<label for="three">#THREE</label>
<input type="text" class="example" data-group="group2" id="three">
<br/>
<label for="four">#FOUR</label>
<input type="text" class="example" data-group="group2" readonly="readonly" id="four">

        <h2>Problem</h2>
<label for="five">#FIVE</label>
<input type="text" class="example" data-group="group3" id="five">
<br/>
<label for="six">#SIX</label>
<input type="text" class="example" data-group="group3" readonly="readonly" id="six">

Answer 3

Внутри true ветви вашего оператора if используйте метод .nextAll() вместе с селектором, чтобы найти следующую input следующую this , Таким образом, когда у первого входа будет удален класс, у следующего входа также будет удален его класс.

Кроме того, измените настройку события input, чтобы она в первую очередь работала с input элементами определенного класса, и присвойте первому из каждого набора input s этого класса.

$('#one').on('input',function(){
  $('#two').val(  $('#one').val()  );
});

// Only when an input with the "input" class gets input
$('input.input').on('input', function () {
  if ($(this).hasClass('input')) {
     $(this).removeClass('input');
     
     // Find the next input sibling that follows "this"
     $(this).nextAll("input").removeClass("input");
  }
});

.input {
  color: orange;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Normal Case</h2>
<input type="text" class="input">

<h2>Problem</h2>
<label for="one">#ONE</label>
<input type="text" class="input" id="one">
<br>
<label for="two">#TWO</label>
<input type="text" class="input" readonly="readonly" id="two">