Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Non funziona mai il primo bottone

    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

  2. #2
    Nella tua pagina ci sono tre elementi con id "hide"

  3. #3
    Grazie mille! Mi hai salvato! Usando un template già pronto non ci avevo fatto caso agli altri Hide
    Dovrò stare più attento ad usare nomi meno comuni

  4. #4
    Prego. Un'altra cosa: quei return false sono completamente inutili, puoi anche toglierli.

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.