Como usar o valor da opção suspensa do campo de seleção no carregamento da página para ocultar um elemento com JQuery? - jquery, jquery-selectors

Estou escondendo alguns elementos com base no valor atual de um campo de seleção com o seguinte JQuery:

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

E isso funciona bem. (os elementos possuem classes dinâmicas, por ex. "hide-if-123")

No entanto, eu também gostaria de ocultar elementos relevantes quando a página é carregada. Devo usar uma função diferente (em vez de "alterar")?

Ou talvez colocar o código fora da função também, então ele é executado na carga e na mudança? Eu tentei isso:

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

mas isso não funciona. Eu presumo que eu tenha essa parte $(".select").val() errado.

É importante que obtenha o valor do mesmo campo de seleção que o "select" no começo da linha. Eu também tentei:

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

mas ainda sem sorte.

Muito obrigado por sua ajuda!

Respostas:

2 para resposta № 1

Para executar sua lógica de mudança quando a página é carregada, você pode simplesmente acionar change evento.

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

---

1 para resposta № 2

Você pode apenas acionar o manipulador de alterações que você já criou:

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

Chamando .change() sem parâmetros é o equivalente a .trigger("change").

Apesar de ter dito que eu não vejo por que seu código:

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

não funcionaria - todos os elementos existem quando a página é carregada pela primeira vez? E a linha acima está incluída em um manipulador de documentos prontos e / ou no final do corpo após os elementos em questão?

---

0 para resposta № 3

adicione uma classe comum a todos os elementos e use o css para ocultá-los

 .hidden-class{ display:none}

O benefício é não ter que esperar que o script seja ativado para tornar os elementos ocultos

---