# Toepassing 2: rating
{% hint style="success" %}
★ Open **selectors/toep\_rating.html**.
{% endhint %}
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:
```markup
...
Totale score: 0
...
```
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:
```markup
```
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:
```javascript
$(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.
{% hint style="success" %}
★ Open de pagina in een browser en bekijk het voorlopige resultaat.
{% endhint %}
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.
```javascript
$('.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.
{% hint style="success" %}
★ Pas de code als volgt aan en test het resultaat in een browser:
{% endhint %}
```javascript
$('.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.
{% hint style="success" %}
★ Pas de code als volgt aan en test het resultaat in een browser:\
(De totale score wordt nog niet berekend.)
{% endhint %}
```javascript
$('.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*.
{% hint style="success" %}
★ Pas de code als volgt aan en test het resultaat in een browser:
{% endhint %}
```javascript
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.
{% hint style="success" %}
★ Pas de code als volgt aan en test het resultaat in een browser:
{% endhint %}
```javascript
$('#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.
{% hint style="success" %}
★ Pas de code als volgt aan en test het resultaat in een browser:
{% endhint %}
```javascript
$('.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.
{% hint style="success" %}
★ 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`.)
{% endhint %}
```markup
...
```
{% hint style="success" %}
★ Test het resultaat in een browser.
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://1itf.gitbook.io/jquery/5-selectie-verfijnen-traversing/toepassing-2-rating.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
