原生JS和jQuery之間的沖突
[英]conflict between Native JS and jQuery
問題描述
我正在讀一本教科書，在一個示例中遇到了一個問題。
這是我的html：
$(function(){ $("#checkAll").click(function(){ $("[name=items]:checkbox").attr("checked", true); console.log("check all"); }); $("#checkNo").click(function(){ $("[name=items]:checkbox").attr("checked", false); console.log("check none"); }); $("#checkRev").click(function(){ $("[name=items]:checkbox").each(function(){ this.checked = !(this.checked); }); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>practice</title> <link rel="stylesheet" type="text/css" href="practice.css"> <script type="text/javascript" src="jquery-3.2.1.js"></script> </head> <body> <form> <label for="items">你最喜歡的運動是：</label><br> <input type="checkbox" name="items" value="羽毛球">羽毛球<input type="checkbox" name="items" value="籃球">籃球<input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="乒乓球">乒乓球<br> <input type="button" id="checkAll" value="Check All"> <input type="button" id="checkNo" value="Check None"> <input type="button" id="checkRev" value="Reversed Check"> <input type="button" id="submit" value="Submit"> </form> <script type="text/javascript" src="practice.js"></script> </body> </html>
如果先單擊“反向檢查”按鈕，則單擊它們時“全部檢查”和“不檢查”按鈕將不起作用。 然后，我將單擊“反轉檢查”按鈕的事件下的代碼更改為jQuery函數。 這是修改后的js代碼：
$(function(){ $("#checkAll").click(function(){ $("[name=items]:checkbox").attr("checked", true); console.log("check all"); }); $("#checkNo").click(function(){ $("[name=items]:checkbox").attr("checked", false); console.log("check none"); }); $("#checkRev").click(function(){ $("[name=items]:checkbox").each(function(){ $(this).attr("checked", !($(this).attr("checked"))); //here's the changed part!!! }); }); })
在這種情況下，如果您手動選中任何復選框，則三個按鈕中的任何一個都將不適用於該特定復選框。
我懷疑原生HTML-JS屬性和jQuery函數之間可能存在細微的沖突。
非常感謝你們告訴我導致這種故障的機制。 謝謝！
2 個解決方案
解決方案1
1 2017-06-20 03:15:38
不要設置屬性 ，設置屬性 。 （這是this.checked = ...的工作。）也就是說，使用jQuery的.prop()方法而不是.attr() 。
$(function(){ $("#checkAll").click(function(){ $("[name=items]:checkbox").prop("checked", true); console.log("check all"); }); $("#checkNo").click(function(){ $("[name=items]:checkbox").prop("checked", false); console.log("check none"); }); $("#checkRev").click(function(){ $("[name=items]:checkbox").each(function(){ this.checked = !(this.checked); }); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title>practice</title> <link rel="stylesheet" type="text/css" href="practice.css"> <script type="text/javascript" src="jquery-3.2.1.js"></script> </head> <body> <form> <label for="items">你最喜歡的運動是：</label><br> <input type="checkbox" name="items" value="羽毛球">羽毛球<input type="checkbox" name="items" value="籃球">籃球<input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="乒乓球">乒乓球<br> <input type="button" id="checkAll" value="Check All"> <input type="button" id="checkNo" value="Check None"> <input type="button" id="checkRev" value="Reversed Check"> <input type="button" id="submit" value="Submit"> </form> <script type="text/javascript" src="practice.js"></script> </body> </html>
解決方案2
0 2017-06-20 03:46:15
嘗試這個...
$(function(){ $("#checkAll").click(function(){ $("input[name=items]").prop("checked", true); console.log("check all"); }); $("#checkNo").click(function(){ $("input[name=items]").prop("checked", false); console.log("check none"); }); $("#checkRev").click(function(){ $("input[name=items]").each(function(){ this.checked = !(this.checked); }); }); })
<!DOCTYPE html> <html> <head> <title>practice</title> <link rel="stylesheet" type="text/css" href="practice.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <form> <label for="items">你最喜歡的運動是：</label><br> <input type="checkbox" name="items" value="羽毛球">羽毛球<input type="checkbox" name="items" value="籃球">籃球<input type="checkbox" name="items" value="足球">足球<input type="checkbox" name="items" value="乒乓球">乒乓球<br> <input type="button" id="checkAll" value="Check All"> <input type="button" id="checkNo" value="Check None"> <input type="button" id="checkRev" value="Reversed Check"> <input type="button" id="submit" value="Submit"> </form> <script type="text/javascript" src="practice.js"></script> </body> </html>
jQuery和Zoomooz.js之間的沖突：animate和zoomTarget同時出現
[英]Conflict between jQuery and Zoomooz.js: animate & zoomTarget at the same time
在 JQuery 和 vanilla JS 之間設置 function 時可能發生沖突？
[英]Possible conflict while setting function between JQuery and vanilla JS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.