Functies in jQuery

Zodra u met jQuery aan de slag gaat, kan u niet buiten anonieme functies. Blader maar even terug naar het if-else voorbeeld uit dit hoofdstuk.

$('#getal').keyup(function(){
    // voer instructies uit
});

In jQuery zijn deze functies meestal niet gekoppeld aan een variabele (het kan wel), maar zijn ze rechtstreeks gekoppeld aan een event.

★ Open jsIntro/functies_jQuery.html.

Hier ziet u het jQuery equivalent van de functie toonKnopX(knop) uit de vorige paragraaf.

<body>
    ...
    <button class="button" id="knop1">knop 1</button>
    <button class="button" id="knop2">knop 2</button>
    <button class="button" id="knop3">knop 3</button>
    ...
    <script>
    ...
    $('.button').click(function(){ 
        var knop = $(this).text();
        alert("U hebt op " + knop + " geklikt.");
    });
    ...
</script>
</body>

Lijn 9 : de functie wordt geactiveerd vanuit het click-event op alle objecten met als class .knop.
Lijn 10: het kernwoord $(this) verwijst naar het object dat de functie oproept. De waarde of value val() van dit object wordt gekoppeld aan de variabele knop.
Lijn 11: Vervolgens wordt het resultaat in een pop-upvenster getoond.

Merk nogmaals op hoe we in dit voorbeeld de code volledig van de HTML scheiden.

PreviousFuncties NextScope (zichtbaarheid) van variabelen

Last updated 7 years ago