jquery - 重构 jquery 以通过 jquery-lint

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-namenewstate change()

---

当然，您也可以只将结果集分配给一个临时变量，以便只执行一次选择器：

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();
});