重构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给出了以下信息。

，当您知道返回的集合将有所不同时，应该只使用同一选择器多次。例如，如果您向页面中添加了更多可能符合选择器的元素

如何修改代码以删除此消息

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输入的显示状态是从newstate change()处理程序外部操作的，则可能会使newstate状态和new-state-name显示状态不同步。

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

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