jQuery removeClass 和 addClass 不適用於特定的 CSS 選擇器

Question

我正在一個簡單的網站上工作，並希望在它們匹配時將 class 添加到輸入中。

我以前嘗試使用以下方法添加 class （並刪除錯誤類）：

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

但這不起作用。 它正在檢索這兩個對象，但僅在第一個 object (pass1Obj) 上添加和刪除 class。

這雖然有效。

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

我正在使用來自https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js的 jquery 版本 3.4.1

為什么選擇和更改對象單獨工作但選擇多個不？

Answer 1

為什么選擇和更改對象單獨工作但選擇多個不？

根據 jQuery object $(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>