重構的jQuery通過jQuery的皮棉

Question

我有一個HTML頁面

jQuery("input[name='newstate']").change(function(){ 
    if(jQuery(this).attr("checked")) { 
     jQuery('input[name="new-state-name"]').show(); 
    } else { 
     jQuery('input[name="new-state-name"]').hide(); 
    } 
}); 

下面的代碼，但jQuery的lint會給出以下信息。

只有當您知道返回的集合會不同時，才應多次使用相同的選擇器。例如，如果您添加更多的元素到可以符合選擇

頁如何修改我的代碼刪除此消息

Answer 1

的.toggle()方法接受showOrHide布爾：

jQuery("input[name='newstate']").change(function(){ 
    // You can use this.checked instead of jQuery(this).attr("checked"); 
    jQuery('input[name="new-state-name"]').toggle(this.checked); 
}); 

這樣你就會知道的new-state-name輸入的顯示狀態總是與newstate輸入匹配（即，它將在選中時顯示，忽略它的先前狀態）。我的意思是，使用toggle()而不使用showOrHide，您可能會面臨newstate狀態和new-state-name顯示狀態不符合同步的風險。 new-state-name輸入的顯示狀態是從newstatechange()處理程序的外部操縱的。如果你打算做多顯示/隱藏更多

jQuery("input[name='newstate']").change(function(){ 
    var newStateInput = jQuery('input[name="new-state-name"]'); 
    if(this.checked) { 
     newStateInput.show(); 
     // ... more here 
    } else { 
     newStateInput.hide(); 
     // ... and/or here 
    } 
}); 

：

---

當然你也可以只分配結果的順序設置爲一個臨時變量來一次進行選擇。

---

編輯
哎呀，不幸的錯字。 show()應該是第一個解決方案中的toggle()。

Answer 2

jQuery("input[name='newstate']").change(function(){ 
     jQuery('input[name="new-state-name"]').toggle(); 
});