Как использовать раскрывающееся значение опции поля выбора при загрузке страницы, чтобы скрыть элемент с помощью 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();

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

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

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

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

Answer 3

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

 .hidden-class{ display:none}

Преимущество не нужно, нужно ждать, пока сценарий включится, чтобы скрыть элементы