jQuery removeClass и addClass не работают с определенным селектором CSS

Question

Я работаю на простом веб-сайте и хочу добавить класс к входам, когда они совпадают.

Ранее я пытался добавить класс (и удалить класс ошибок), используя это:

var pass1Obj = $('#SignUpPassword');
var pass2Obj = $('#SignUpPasswordRep');
$(pass1Obj, pass2Obj).removeClass('failInput');
$(pass1Obj, pass2Obj).addClass('successInput');

но это не сработало. Он извлекал оба объекта, но только добавлял и удалял класс в первом объекте (pass1Obj).

Это работает, хотя. https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Почему выбор и изменение объектов по отдельности работают, а выбор нескольких - нет?

Answer 1

Почему выбор и изменение объектов по отдельности работают, а выбор нескольких - нет?

Согласно объекту jQuery $(pass1Obj, pass2Obj), вы указываете контекст , которыйвнутренне преобразуется в

$(pass2Obj).find(pass1Obj)

, и поскольку pass1Obj не является потомком pass2Obj, приведенный выше код не работает.

---

Вы могли бы использовать .add() для создания нового jQuery, тогда с ним можно выполнить нужную операцию.

pass1Obj.add(pass2Obj).toggleClass('failInput successInput');

Вот пример.

var p1 = $("#para1"),
  p2 = $("#para2");

p1.add(p2).toggleClass("red green");

.green {
  color: green;
}

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="para1" class="red">Para1</p>
<p id="para2" class="red">Para2</p>