Question

我有这段代码警告我重复$("#demo-select")使用选择器：

    let demoSelect = $("#demo-select").val();
        if (demoSelect){

            $('#days_count').show();
        }

        $("#demo-select").change(function(){
            if (this.value){
                $('#days_count').show();
            } else {
                $('#days_count').hide();
            }

        });

如何编写该代码以免重复？

Answer 1

您收到警告，因为查询DOM中的选择器非常昂贵。

因此，您应该缓存jQuery对象的副本，然后在需要时引用它。

let $demoSelect = $("#demo-select");
let demoSelectVal = $demoSelect.val();

if (demoSelectVal){
  $('#days_count').show();
}

$demoSelect.change(function(){
  if (this.value){
    $('#days_count').show();
  } else {
    $('#days_count').hide();
  }
});

Answer 2

警告来自重复使用$('#demo-select')。您可以创建一个变量来保存该值并重新使用它。这是首选，因为DOM访问是一个（相对）缓慢的操作，应尽可能避免。

let $demoSelect = $("#demo-select").change(function() {
  if (this.value) {
    $('#days_count').show();
  } else {
    $('#days_count').hide();
  }
});

if ($demoSelect.val()) {
  $('#days_count').show();
}

但是，您可以通过使用toggle()并在加载时触发change事件来避免此问题并使逻辑更加简洁：

$("#demo-select").change(function() {
  $('#days_count').toggle(!!this.value);
}).trigger('change');

Answer 3

可能是您的IDE或某些整理工具发出的警告。

您正在捕获let demoSelect = ("#demo-select");中的元素，但是随后通过$("#demo-select").change...重新选择了元素，则应该只重用demoSelect：

let demoSelect = $("#demo-select");

if (demoSelect.val()) {
    $('#days_count').show();
}

demoSelect.change(function() {
    if (this.value) {
        $('#days_count').show();
    } else {
        $('#days_count').hide();
    }
});

请注意，.val()的检查现在位于if语句中。

jQuery，重复选择器

3 个答案: