Det finnes en del gode rammeverk for javascript. En av disse er jQuery. I denne guiden skal jeg vise hvor enkelt ting kan gjøres med nettopp dette rammeverket.

Del 1: Toggle
“Toggle” betyr å bytte mellom ting. Denne funksjonen lar oss for eksempel bytte mellom to bilder.

$(document).ready(function() {
  $(".bytt").toggle(
    function() { $(".meg").attr("src", "after.jpg"); },
    function() { $(".meg").attr("src", "before.jpg"); }
  );
});

Om vi nå lager html-strukturen på denne måten:

<img class="meg" src="bilde1.jpg" alt="bilde bytte" />
<span class="bytt">Se før og etter bilder av meg!</span>

Når en bruker da trykker på “Se før og etter bilder av meg!” vil bildet bytter mellom “before.jpg” og “after.jpg”

Forklaring:

det første vi gjør er å bruke $(document).ready(function() {
Dette vil klargjøre scriptet såsnart DOM er lastet.
Neste er å legge toggle funsksjonen til teksten. Til dette bruker vi klassen “bytt” (<span class=”bytt”>)
$(".bytt").toggle(

Toggle funskjonen er avhenging av to funsksjoner å bytte imellom.
function() { $(".meg").attr("src", "after.jpg");

Neste funksjon blir det originale bildet

function() { $(".meg").attr("src", "before.jpg"); }

Inne i disse funsksjonene sier vi at et element med klassen “meg” skal endre attributen “src” (Som er bilde kilden)
$(".meg").attr("src", "before.jpg");