Toepassing 2: rating

★ Open selectors/toep_rating.html.

Rating

De ratingpagina bevat vier afbeeldingen. Klik straks op één van de sterren om een waardeoordeel tussen 1 en 5 uit te brengen. Bovenaan de pagina verschijnt de totale score van alle afbeeldingen. Verder is er een knop voorzien waarmee u de totale score kan wissen. Individuele scores wissen kan door op de afbeelding te klikken.

Verder is het ook belangrijk dat de pagina eenvoudig uit te breiden is. Indien we een vijfde ratingblok toevoegen, blijft de pagina werken zonder het script aan te passen.

Laat ons eerst de belangrijkste delen uit de pagina bespreken. De HTML-code is als volgt opgebouwd:

...
<h2>Totale score: <span id="teller">0</span></h2>
...
<section class="columns_2">
    <section>
        <div class="bloem">
            <img src="../assets/fotos/thumb_anjer.jpg"...>
        </div>
        <div class="rating">
            <span></span><span></span><span></span><span></span><span></span>
        </div>
    </section>
...
</section>

De totale score komt in een span-tag #teller. Elk ratingblok bestaat uit een section-tag met daarin twee div-tags.

De eerste div-tag met class .bloem bevat enkel een afbeelding. De tweede div-tag met class .rating bevat vijf lege span-tags. Vanuit CSS krijgt elke span-tag een grijze ster als achtergrondafbeelding.

In de CSS-code is vooral de weergave van de sterren belangrijk:

<style type="text/css">
.rating span { 
    width: 45px; 
    height: 37px; 
    display: block; 
    float: left; 
    cursor: pointer;
}
.rate_no {
    background: url(../assets/star_grey.png) no-repeat;
}
.rate_yes {
    background: url(../assets/star_gold.png) no-repeat;
}
</style>

De stijlregel .rating span bevat ondermeer de breedte en de hoogte van de span-tags binnen het ratingblok. Daarna volgen twee classes met als achtergrondafbeelding respectievelijk een grijze ster en een gouden ster. Deze classes gaan we dadelijk vanuit ons script aan de span-tags linken.

In het basisscript:

$(function() {
    $('.rating span').addClass('rate_no');
    $('.rating span').click(function(){
        // Klik op een ster
    });
    $('#wisRating').click(function(){
        // Wis de totale score
    });
    $('.bloem img').click(function(){
        // Wis de individuele score
    });
    function berekenRating(){
        // Bereken de totale score
    }
});

De eerste lijn binnen het script voegt de class rate_no toe aan elke span-tag binnen het ratingblok. De grijze sterren zijn zichtbaar.

Vervolgens komen er drie click-events die we dadelijk stap voor stap gaan uitwerken. Als laatste hebben we nog een functie waarbinnen we de totale score gaan berekenen.

★ Open de pagina in een browser en bekijk het voorlopige resultaat.

Als eerste gaan we de kleur van de sterren aanpassen. Bij elke klik op een ster krijgen deze ster plus alle voorgaande sterren een andere kleur. Dit doen we door de class rate_yes aan de span tags toe te voegen.

$('.rating span').click(function(){
    // Klik op een ster
    $(this).prevAll().addBack().addClass('rate_yes');
});

De rating werkt, maar we hebben nog één probleem. Een volgende ster aanklikken kan, maar een vorige ster aanklikken lukt niet. We kunnen de score dus wel verhogen, maar niet verlagen. Dit is op te lossen door eerst de reeds aanwezige class rate_yes op alle span-tags te wissen en pas daarna de class opnieuw toe te kennen.

★ Pas de code als volgt aan en test het resultaat in een browser:

$('.rating span').click(function(){
    // Wis de totale score
    $(this).siblings().removeClass('rate_yes');
    $(this).prevAll().addBack().addClass('rate_yes');
});

Zodra een afbeelding een score heeft, gaan we de achtergrond van de afbeelding inkleuren. Verder moeten we ook nog de totale score berekenen.

★ Pas de code als volgt aan en test het resultaat in een browser: (De totale score wordt nog niet berekend.)

$('.rating span').click(function(){
    // Wis de totale score
    $(this).siblings().removeClass('rate_yes');
    $(this).prevAll().addBack().addClass('rate_yes');
    $(this).parent().parent().find('.bloem').addClass('drop'); 
    berekenRating();
});

De totale score berekenen is vrij eenvoudig. Tel het aantal span-tags met de class rate_yes. Het aantal kan u ook hier weer opvragen met de eigenschap length.

★ Pas de code als volgt aan en test het resultaat in een browser:

function berekenRating(){
    // Bereken de totale score
    var teller = $('.rate_yes').length;
    $('#teller').text(teller);
}

Om de totale score te wissen, volstaat het om overal de class rate_yes te wissen. De achtergrondkleur van de afbeeldingen verdwijnt en de teller wordt terug op 0 gezet.

★ Pas de code als volgt aan en test het resultaat in een browser:

$('#wisRating').click(function() {
    // Wis de totale score
    $('span').removeClass('rate_yes');
    $('.bloem').removeClass('drop'); 
    berekenRating();
});

Door op een foto te klikken, gaan we de individuele score wissen. Kijk eerst even terug naar de broncode van een ratingblok. Vanaf de img-tag navigeren we naar de dichtstbijzijnde section-tag. Hiervoor gebruiken we tweemaal de methode parent() of éénmaal de methode closest('section'). Vervolgens gaan we op zoek naar alle span-tags en verwijderen we de class rate_yes. De achtergrondkleur van de afbeelding wordt gewist en de totale score wordt opnieuw berekend.

★ Pas de code als volgt aan en test het resultaat in een browser:

$('.bloem img').click(function(){
    // Wis de individuele score
    $(this).closest('section').find('span').removeClass('rate_yes');
    $(this).parent().removeClass('drop'); 
    berekenRating();
});

Als laatste controleren we nog even of het script volledig universeel is.

★ Voeg achter het laatste ratingblok een extra ratingblok toe. Kopieer hiervoor een bestaand ratingblok en pas het pad naar de afbeelding aan. (thumb_xxx.jpg wordt thumb_tulp.jpg.)

<article">
    ...
    <section>
        <div class="bloem">
            <img src="../assets/fotos/thumb_tulp.jpg"...>
        </div>
        <div class="rating">
            <span></span><span></span><span></span><span></span><span></span>
        </div>
    </section>
</article>

★ Test het resultaat in een browser.