1

我是 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我来说感觉很笨拙。

谢谢你的帮助。

4

5 回答 5

5

可能有：

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

小提琴

于 2013-09-28T16:31:29.203 回答
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();
  }
}
于 2013-09-28T16:30:52.700 回答
2

我认为你不应该使用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 并设置标志来禁用它。摘自官方文档

对于 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);
}
于 2013-09-28T16:31:27.467 回答
1

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

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();
}
于 2013-09-28T16:29:22.927 回答
1 
$(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函数污染全局命名空间

于 2013-09-28T16:33:58.293 回答