Как избежать повторения имен селекторов в jQuery?

Я новичок в JQuery и JavaScript, и мне интересно, если есть более короткий путь, чтобы написать это:Как избежать повторения имен селекторов в jQuery?

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 чувствует себя неуклюжим для меня.

Спасибо за любую помощь.

источник

2013-09-28 Tintin81

Там, вероятно,:

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

источник

2013-09-28 16:31:29 adeneo

Это действительно очень коротко! Большое спасибо. И спасибо всем остальным. – Tintin81

Я бы рекомендовал сделать код более удобочитаемым. Это важно в любой ситуации, но особенно учитывая, что OP является новым для js и jQuery. Пусть миникатор/обфускатор беспокоится о том, чтобы сделать компактный источник. – ComethTheNerd

@SCRIPTONITE - вопрос заключался не в том, как сделать его более читаемым, а как сделать его короче, и он отлично читаем для меня? – adeneo

Назначить селектор переменной i.e кешировать селектор и использовать его там, где вы хотите.

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-28 16:29:22

как насчет '$ ('# search input [type = submit]')'? – Greenhorn

@Ram, пожалуйста, прочитайте еще раз 's_t.prop ('disabled',! S_t.val(). Length);' –

var s_t = $ ('# search input [type = text]'), но я не могу найти ' $ ('# search input [type = submit]') ' – Greenhorn

одно, что с #clear_button уже имеет идентификатор, вам не нужно ссылаться на #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-28 16:30:52 Charlie74

Также не обязательно, что удаление классификатора приведет к такому же поведению. То есть исходный код может явно указывать только на элемент «clear_button», когда он является дочерним элементом «поиска». – Pointy

@ RokoC.Buljan Я полностью не согласен. OP нуждался в меньшем количестве идентификаторов #search. Я предоставил код, который сделал это, а также дал предложение относительно ссылки на идентификаторы. – Charlie74

@Примечание, хотя это технически верно ... ID никогда не должен использоваться более одного раза на странице. – Charlie74

Я думаю, что вы не должны использовать 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); 
}

Просто используйте опору и установить флаг, чтобы отключить его или нет. Выдержка из official doc

С некоторыми встроенными свойствами DOM элемента или объекта окна, браузеры могут генерировать ошибку, если сделана попытка удалить свойство. jQuery сначала присваивает значение, неопределенное свойству, и игнорирует любые ошибки, которые генерирует браузер. В общем случае необходимо только удалить настраиваемые свойства, которые были установлены на объекте, а не встроенные (собственные) свойства.

Примечание. Не используйте этот метод для удаления собственных свойств, таких как отмеченные, отключенные или выбранные. Это полностью удалит свойство и, после удаления, не может быть добавлено снова элементу. Используйте .prop(), чтобы вместо этого установить эти свойства в false.

Поскольку вы используете идентификаторы и которые должны быть уникальными, вы можете сделать это, как хорошо

//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-28 16:31:27 PSL

$(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(); 
     } 
    } 


});

Хотя я бы рекомендовал вам не загрязнять глобус al namespace с функцией setSearchForm

источник

2013-09-28 16:33:58 ComethTheNerd

Как избежать повторения имен селекторов в jQuery?

ответ

Смежные вопросы