Question

我是jQuery和Javascript的新手，我想知道是否有更短的写法：

function setSearchForm() {
  if ($('#search input[type=text]').val().length != 0) {
    $('#search input[type=submit]').removeProp('disabled');
    $('#search #clear_button').show();
  } else {
    $('#search input[type=submit]').prop('disabled', true);
    $('#search #clear_button').hide();
  }
}

#search选择器的重复让我感到笨拙。

感谢您的帮助。

Answer 1

可能有：

function setSearchForm() {
    var s = $('#search'), l = !$('input[type=text]',s).val().length;
    $('input[type=submit]',s).prop('disabled',l)
    $('#clear_button',s).toggle(!l);
}

FIDDLE

Answer 2

有一件事是，由于#clear_button已经有了ID，因此您无需在那里引用#search。所以快速清理代码就在这里：

function setSearchForm() {
  if ($('#search input[type=text]').val().length != 0) {
    $('#search input[type=submit]').removeProp('disabled');
    $('#clear_button').show();
  } else {
    $('#search input[type=submit]').prop('disabled', true);
    $('#clear_button').hide();
  }
}

Answer 3

我认为你不应该使用removeProp，删除元素的属性会导致不良行为。但是对于你的问题，你可以写成：

var $search = $('#search');
function setSearchForm() {
    $search.find('#clear_button').toggle();
    $search.find('input[type=submit]').prop('disabled', !$search.find('input[type=text]').val().length);
}

只需使用prop并设置标志即可禁用它。摘录自official doc

使用DOM元素或窗口对象的某些内置属性，如果尝试删除属性，浏览器可能会生成错误。 jQuery首先将值undefined分配给属性，并忽略浏览器生成的任何错误。通常，只需要删除已在对象上设置的自定义属性，而不是内置（本机）属性。

注意：请勿使用此方法删除本机属性，例如已选中，已禁用或已选中。这将完全删除属性，一旦删除，就不能再次添加到元素。使用.prop（）将这些属性设置为false。

由于您使用的ID必须是唯一的，因此您也可以这样做

//cache this outside since this is gng to be unique and to avoid creating the object over and again
var $search = $('#search'), $clear = $('#clear_button'); 
function setSearchForm() {
    $clear.toggle();
    $search.find('input[type=submit]').prop('disabled', !$search.find('input[type=text]').val().length);
}

Answer 4

将选择器分配给变量，即缓存选择器并在任何需要的地方使用它。

var s_s = $('#search input[type=submit]');
var s_t = $('#search input[type=text]');
var s_c = $('#search #clear_button');

function setSearchForm() {
    s_s.prop('disabled', !s_t.val().length);
    s_c.toggle();
}

Answer 5

$(document).ready(function(){


  var search = $('#search'),
      submit = search.find('input[type=submit]'),
      textInput = search.find('input[type=text]'),
      clear = $('#clear_button');

  setSearchForm = function(){
      if (textInput.val().length != 0) {
          submit.removeProp('disabled');
          clear.show();
      } else {
          submit.prop('disabled', true);
          clear.hide();
      }
  }


});

虽然我建议您不要使用setSearchForm函数

污染全局命名空间

如何避免在jQuery中重复选择器名称？

5 个答案: