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

1 つは、#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 をプロパティに割り当て、ブラウザーが生成するエラーを無視します。一般に、組み込み (ネイティブ) プロパティではなく、オブジェクトに設定されているカスタム プロパティのみを削除する必要があります。

注: このメソッドを使用して、checked、disabled、または selected などのネイティブ プロパティを削除しないでください。これにより、プロパティが完全に削除されます。一度削除すると、要素に再度追加することはできません。.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 
$(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 に答える
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 に答える