Как использовать значение раскрывающегося списка поля выбора для загрузки страницы, чтобы скрыть элемент с помощью JQuery?

Question

Я прячусь некоторые элементы на основе текущего значения выберите поле со следующим JQuery:

$('.select').change(function() { 
    $(this).parent().siblings('*[class*=hide-if-]').show(); 
    $(this).parent().siblings('.hide-if-' + $(this).val()).hide(); 
}); 

И это прекрасно работает. (элементы имеют динамические классы, например, «hide-if-123»)

Однако я также хотел бы скрыть соответствующие элементы при загрузке страницы. Должен ли я использовать другую функцию (вместо «изменить»)?

Или, может быть, поставить код вне функции, так что он выполняется при загрузке и при изменении? Я попытался это:

$('.select').parent().siblings('.hide-if-' + $('.select').val()).hide(); 

, но он не работает. Я полагаю, что у меня есть эта часть $('.select').val() неправильно.

Важно, чтобы в начале строки оно получало значение того же поля выбора, что и "select". Я также пробовал:

$('.select').parent().siblings('.hide-if-' + $(this).val()).hide(); 

но все еще не повезло.

Большое спасибо за помощь!

Answer 1

Для того, чтобы выполните свою логику изменений, когда страница загружена, вы можете просто запустить событие change.

$(function() { 
    $('.select').trigger('change'); 
}); 

Answer 2

Вы можете просто вызвать обработчик изменений вы уже создали:

$('.select').change(function() { 
    $(this).parent().siblings('*[class*=hide-if-]').show(); 
    $(this).parent().siblings('.hide-if-' + $(this).val()).hide(); 
}).change(); 

Calling .change() без параметров является эквивалентом .trigger('change').

Хотя, говорит, что я не понимаю, почему ваш код:

$('.select').parent().siblings('.hide-if-' + $('.select').val()).hide(); 

не будет работать - делать все элементы существуют, когда страница первые грузы? И приведенная выше строка включена в готовый обработчик документа и/или в конце тела после рассматриваемых элементов)?

Answer 3

добавить общий класс для всех элементов и использовать CSS, чтобы скрыть их

.hidden-class{ display:none} 

Выгода дон; т придется ждать сценария пнуть, чтобы сделать элементы скрыты