javascript - jQuery，重复选择器

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

警告来自重复使用 $('#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');