Jquery problema show() e hide()

**fabiodj** · 18-12-2022, 21:55

Salve
ho creato un semplice script ma non sta funzionando; che abbia dimenticato qualcosa nel codice ?
Chiedo supporto magari è un errore mio.

codice HTML:

<script src="https://code.jquery.com/jquery-3.6.2.slim.min.js" integrity="sha256-E3P3OaTZH+HlEM7f1gdAT3lHAn4nWBZXuYe89DFg2d0="  crossorigin="anonymous"></script>
<script>    $(document).ready(function(){ $('input:radio[name='settore']:checked').change(function() {if($("input[name='settore']").val() == '1');    $("div#pos-animatore").show();if($("input[name='settore']").val() == '2');$("div#post-risto").show();    });    });
</script><body><div>    <input type="radio" name="settore" value="!"><label for"animazione"> Animazione</label>    <input type="radio" name="settore" value="2"><label for"lavoro-an">Ristorante</label>    <input type="radio" name="settore" value="3"><label for"lavoro-an">Hotel</label></div>
<p></p>
<div id="pos-animatore" style="display: none;"><select class="pos-lavoro"  name="pos-lavoro-animatore" >            <option>Selecione</option>            <option value="1">capo animazione</option>            <option value="2">miniclub</option>            <option value="3">sport</option>        </select></div>
<div id="pos-risto" style="display: none;">        <select class="pos-lavoro"  name="pos-lavoro-risto">            <option>Selecione</option>            <option value="sofa-1">cuoco</option>            <option value="sofa-2">barman</option>            <option value="sofa-3">cameriere</option>        </select>
<div id="pos-hotel" style="display: none;">        <select class="pos-lavoro" name="pos-lavoro-risto">            <option>Selecione</option>            <option value="sofa-1">Menos de 6 meses</option>            <option value="sofa-2">De 6 meses a 2 anos</option>            <option value="sofa-3">Mais de 2 anos</option>        </select>    </div>

**KillerWorm** · 19-12-2022, 00:15

Ciao, non ti do una soluzione ma vedo un bel po' di errori che ti indico:

codice:

$('input:radio[name='settore']:checked')

Qui c'è qualche problema con gli apici. Per gli apici interni alla stringa, o fai un escape o usi degli apici differenti (così come hai fatto più avanti).

Ancora, la pseudo-classe :checked identifica gli elementi che già sono in quello stato. Nel momento in cui viene eseguito questa parte, non c'è nessun elemento checked, per cui non viene selezionato alcun elemento e di conseguenza non viene applicato alcun listener per quel change.

codice:

if($("input[name='settore']").val() == '1');

Leggi la documentazione, val() restituisce il valore del primo elemento nel set di elementi rilevati. Il tuo selettore in questo punto identifica tutti gli input settore, per cui otterrai sempre il valore del primo. Forse in questo caso potresti usare :checked per identificare appunto solo l'input selezionato o, meglio ancora, al posto di usare un selettore jQuery puoi usare la parola chiave this che, in questo caso, fa riferimento direttamente all'elemento DOM per il quale è richiamato quel listener; quindi avrai this.value == '1'.

codice:

$("div#pos-animatore")

Qui ti do giusto un consiglio come buona pratica, se devi selezionare un elemento attraverso il suo id, a parte casi particolari, è più performante usare solamente il selettore per id, cioè senza anteporre alcunché al cancelletto coll'id, dato che già solo quello identifica in maniera inequivocabile tale elemento. Quindi è preferibile: $("#pos-animatore")

codice:

if($("input[name='settore']").val() == '1');

Hai messo il punto e virgola alla fine della definizione dell'if ma in questo modo non viene riconosciuto il corpo della condizione. O usi le graffe o scrivi tutto in una riga, quindi senza quel punto e virgola.

Ancora, non vedo dove hai usato hide(). Infatti stai usando show() per mostrare l'elemento relativo al radio selezionato ma non non vai a nascondere gli eventuali altri che potrebbero risultare visibili.

codice:

<input type="radio" name="settore" value="!">

Qui un classico typo, forse non hai rilasciato bene lo SHIFT mentre digitavi la stringa nel value.

codice:

$("div#post-risto")

Altro typo, #post-risto non esiste, c'è qualche carattere di troppo

Magari qualcun altro potrebbe postare il codice bell'e pronto ma personalmente, con ciò che ti ho indicato, ti invito a capire dove hai sbagliato e provare a correggere gli errori da te stesso.

Fai sapere se incontri difficoltà.

Discussione: Jquery problema show() e hide()

Strumenti discussione

Ricerca discussione

Visualizza

Jquery problema show() e hide()

Permessi di invio