Succede mai, anche a voi, che funzioni tutto a parte il primo bottone? A me è capitato di nuovo e non riesco a capire il motivo. Premetto che in locale funziona tutto e va alla grande, ma una volta che immetto il codice nel mio sito, il primo bottone smette di funzionare.
Ecco il codice JQuery:
codice:
<script src="Js/jquery.min.js"></script> <!-- versione 3.3.1 -->
<script>
$(function(){
$('#click').click(function(){
if($('#hide').css('display') == 'block') {
$('#hide').css('display','none');
} else {
$('#hide').css('display','block');
return false;
}
});
$('#noclick').click(function(){
if($('#noclick').css('color') == 'rgb(138, 43, 226)'){
$('#noclick').css('color','#999999');
} else {
$('#noclick').css('color', '#8a2be2');
return false;
}
});
$('#muta').mouseover(function() {
if($('#rivela').css('display') == 'block') {
$('#rivela').css('display', 'none');
} else {
$('#rivela').css('display', 'block');
return false;
}
});
$('#muta').mouseout(function() {
if($('#rivela').css('display') == 'none') {
$('#rivela').css('display', 'block');
} else {
$('#rivela').css('display', 'none');
return false;
}
});
});
</script>
ed la parte di HTML:
codice:
<div id="test">
<p class="ptest">
<input type="button" id="click" value="Spoiler alert!" />
<span id="hide" style="display: none">Ciao!</span>
</p>
<p class="ptest">
</p>
<p class="ptest">
Questo semplicissimo script è reso ancora più semplice dal <span id="noclick">JQuery</span>, il quale ci permette di snellire la grammatica. Basta infatti aggiungere, in una funzione anonima (che verrà richiamata solamente una volta), il metodo <strong>.click</strong> il quale è in grado di trasformare qualsiasi oggetto del nostro sito, un bottone cliccabile. Anche una foto, un paragrafo o una singola lettera. Per modificare l'estetica o il comportamento di un elemento basta semplicemente usare il metodo <strong>.css</strong>. Quindi semplicemente andremo a mettere una condizionale if, dove la discriminante sarà se il componente è già del colore che vogliamo; in quel caso impostiamo il comportamento contrario. Una volta fatto impostiamo l'else con il comportamento che desiderio faccia il paragrafo nascosto(tramite il CSS "display: none" in grado di eliminare il componente fino alla sua comporsa). Ricordati di inserire alla fine il <code>return false</code> che ha il compito di resettare una volta portato a termine il compito. Ho aggiunto un piccolo scherzetto: prova a trovare la parola segreta che - se una volta cliccata - cambia colore.<br />
<strong>NOTA BENE:</strong> se vuoi cambiare il colore di un elemento ricorda che il JQuery modifica il colore, ma usando i valore RGB e non HEX.
</p>
<p class="ptest">
Lo stesso meccanismo è ripetibile utilizzando il comando <strong>.mouseover</strong>, ovvero quando la freccia del mouse è sopra l'elemento. Per far funzionare questa operazione però si necessita in abbianata anche il <strong>.mouseout</strong> ovvero quando la freccia va via dall'elemento selezionato. In uno ripetiamo il codice del bottone, mentre nell'altro invertiamo il tutto.
</p>
<p class="ptest">
Porta il mouse sopra questa parola: <span id="muta">CIAO!</span><br />
<span id="rivela" style="display:none">È un semplice saluto!</span>
</p>
<p class="ptest">
In JQuery esistono anche due metodi nativi che svolgono a pieno questo incarico: <strong>.hide</strong> e <strong>.show</strong> ma hanno un difetto. Esse, per funzionare, devono avere già gli elementi costruiti dal server, questo comporta che lo script deve essere inserito nel DOM solamente dopo che il bottone è stato caricato. Non è possibile, per tanto, metterlo in uno script esterno al foglio HTML o farlo caricare con <strong>.ready</strong>. Quindi a mio avviso non sono la soluzione ideale per nascondere un elemento.
</p>
Per verificare il funzionamento vi lascio anche la pagine del mio sito:
http://www.marcoimprota.it/web-dinto...-nascosti.html