2015-04-22 24 views
9

Come aggiungere codice jQuery nella pagina HTML

$(".icon-bg").click(function() { 
 
    $(".btn").toggleClass("active"); 
 
    $(".icon-bg").toggleClass("active"); 
 
    $(".container").toggleClass("active"); 
 
    $(".box-upload").toggleClass("active"); 
 
    $(".box-caption").toggleClass("active"); 
 
    $(".box-tags").toggleClass("active"); 
 
    $(".private").toggleClass("active"); 
 
    $(".set-time-limit").toggleClass("active"); 
 
    $(".button").toggleClass("active"); 
 
}); 
 

 
$(".button").click(function() { 
 
    $(".button-overlay").toggleClass("active"); 
 
}); 
 

 
$(".iconmelon").click(function() { 
 
    $(".box-upload-ing").toggleClass("active"); 
 
    $(".iconmelon-loaded").toggleClass("active"); 
 
}); 
 

 
$(".private").click(function() { 
 
    $(".private-overlay").addClass("active"); 
 
    $(".private-overlay-wave").addClass("active"); 
 
});

chiunque può aiutare? È per una funzione di caricamento che ho trovato a http://codepen.io/iremlopsum/pen/YPWPap. Cercando di collegarlo al mio sito web

+0

Questo è Jquery non Javascript! –

+0

Sono abbastanza confuso. Se vuoi solo aggiungerlo: metterlo in un file e collegarlo a quel file JS nel tuo html? Se non sai come farlo, ti suggerisco di dare un'occhiata [qui] (http://www.w3schools.com/js/default.asp). Inoltre, controlla [questa pagina] (http://stackoverflow.com/help/how-to-ask) – Jordumus

+0

Prima di copiare questo codice incolla, la pagina contiene gli elementi che corrispondono ai selettori in questo codice? –

risposta

11

1) Le migliori pratiche è quello di rendere nuovo file javascript come my.js . Crea questo file nella tua cartella js nella directory principale -> js/my.js. 2) Nel file my.js aggiungi il tuo codice all'interno dello scope $ (document) .ready (function() {}).

$(document).ready(function(){ 
    $(".icon-bg").click(function() { 
     $(".btn").toggleClass("active"); 
     $(".icon-bg").toggleClass("active"); 
     $(".container").toggleClass("active"); 
     $(".box-upload").toggleClass("active"); 
     $(".box-caption").toggleClass("active"); 
     $(".box-tags").toggleClass("active"); 
     $(".private").toggleClass("active"); 
     $(".set-time-limit").toggleClass("active"); 
     $(".button").toggleClass("active"); 
    }); 

    $(".button").click(function() { 
     $(".button-overlay").toggleClass("active"); 
    }); 

    $(".iconmelon").click(function() { 
     $(".box-upload-ing").toggleClass("active"); 
     $(".iconmelon-loaded").toggleClass("active"); 
    }); 

    $(".private").click(function() { 
     $(".private-overlay").addClass("active"); 
     $(".private-overlay-wave").addClass("active"); 
    }); 
}); 

3) Aggiungi file nel tuo html

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="/js/my.js"></script> 
</head> 
+0

Grazie per questo! : D –

4

Prima di chiudere il tag body aggiungere questo (riferimento alla libreria jQuery). Altre biblioteche ospitati possono essere trovati here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

E questo

<script> 
    //paste your code here 
</script> 

Dovrebbe essere qualcosa di simile

<body> 
........ 
........ 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script> Your code </script> 
</body> 
1
  1. tuoi nuovi js Creare un file per il jquery esempio uploadfuntion.js.
  2. Salvare il file nella stessa cartella del sito Web o nella sottocartella.
  3. In head sezione del codice HTML pasta pagina: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

e quindi il riferimento allo script ad esempio: <script src="uploadfuntion.js"> </script>

4.Lastly si dovrebbe garantire non ci sono elementi che corrispondono ai selettori nel codice.