Het leuke van jQuery is dat je daarmee vrij makkelijk gedrag kunt definiëren voor HTML-elementen. Hiermee is het vervolgens mogelijk om exotische formulier-elementen te bouwen, die ook nog eens HERBRUIKBAAR zijn.
Bijvoorbeeld als volgt:
<!-- @see https://www.phphulp.nl/php/forum/topic/verander-fa-fa-icon-bij-muis-overlay/102031 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>star rating</title>
<!-- grab jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- some CSS -->
<style type="text/css">
div.rating div.star { display: block; float: left; width: 50px; height: 50px; border: 1px solid #000000; }
div.rating div.active { background-color: #ffcc00; }
div.rating div.inactive { background-color: #ffffff; }
div.clear { clear: both; }
</style>
</head>
<body>
<form>
<!-- start of the star rating form element -->
<div class="rating" id="rating_one">
<div class="star" data-rating="1"></div>
<div class="star" data-rating="2"></div>
<div class="star" data-rating="3"></div>
<div class="star" data-rating="4"></div>
<div class="star" data-rating="5"></div>
<div class="clear"><!-- clear --></div>
</div>
<input type="hidden" name="rating_one" id="rating_one_value" value="0">
<!-- end of the star rating form element -->
<!-- you can make as many of these as you like, as long as they can be uniquely identified and are initialised (see below) -->
<div class="rating" id="rating_two">
<div class="star" data-rating="1"></div>
<div class="star" data-rating="2"></div>
<div class="star" data-rating="3"></div>
<div class="star" data-rating="4"></div>
<div class="star" data-rating="5"></div>
<div class="clear"><!-- clear --></div>
</div>
<input type="hidden" name="rating_two" id="rating_two_value" value="0">
<div class="rating" id="rating_three">
<div class="star" data-rating="1"></div>
<div class="star" data-rating="2"></div>
<div class="star" data-rating="3"></div>
<div class="star" data-rating="4"></div>
<div class="star" data-rating="5"></div>
<div class="clear"><!-- clear --></div>
</div>
<input type="hidden" name="rating_three" id="rating_three_value" value="0">
</form>
<script type="text/javascript">
//<![CDATA[
// define behaviour of a star rating form element
function MyStarRating() {
this.container = false; // identifying the block, the value is stored in a hidden field with the same name and the suffix _value
this.valueField = false;
this.ticked = 0; // which star is ticked
var that = this; // reference to this for listeners
// call with 'id' (required), 'stars' (optional)
this.init = function(options) {
// init container id
this.container = $('#'+options.id);
// init hidden value field id
this.valueField = $('#'+options.id+'_value');
// init selected stars (default none)
if (options.stars) {
var stars = options.stars;
this.selectStar(stars);
this.drawStars(stars);
}
// add listener for hovering
this.container.on('mouseover', 'div', function(e) {
var n = $(this).data('rating');
// if we already ticked something, keep drawing at least as many stars
if (that.ticked > n) {
n = that.ticked;
}
that.drawStars(n);
}); // mouseover
// add listener for clicking
this.container.on('click', 'div', function(e) {
var n = $(this).data('rating');
// did we tick this star before, then reset
if (n == that.ticked) {
that.selectStar(0);
} else {
that.selectStar(n);
}
that.drawStars(that.ticked);
}); // click
// add listener for moving out
this.container.on('mouseout', 'div', function(e) {
// if we did not click anything, clear all stars (that.ticked will be zero)
that.drawStars(that.ticked);
}); // mouseout
} // init
// helper function for filling stars
this.drawStars = function(n) {
// reset colors
this.container.children().each(function() {
if ($(this).data('rating') <= n) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
} // drawStars
// helper function for selecting a star
this.selectStar = function(n) {
// update ticked
this.ticked = n;
// update value field
this.valueField.val(n);
} // selectStar
} // MyStarRating
$().ready(function() {
// create a new star rating
var rating_one = new MyStarRating();
// init the star rating form field and hook up listeners
rating_one.init({'id':'rating_one'});
// and we are off!
var rating_two = new MyStarRating();
rating_two.init({'id':'rating_two'});
var rating_three = new MyStarRating();
rating_three.init({'id':'rating_three', 'stars':'5'}); // init with 5 stars
});
//]]>
</script>
</body>
</html>
Ik heb eerlijk gezegd een beetje moeite met dat soort opmerkingen.
We zitten op een forum om elkaar constructieve feedback te geven, en niet om andere forumleden af te zeiken. En dat laatste is wat jij hier lijkt te doen.
Er zit in jouw opmerking geen enkele vorm van opbouwende kritiek of advies hoe jij het zelf dan zou oplossen. In plaats daarvan ben je alleen maar bezig om iemand naar beneden te halen en dat siert je eerlijk gezegd niet.
Daarnaast geeft de opmerking 'dat je iemand die <div class="clear"> gebruikt niet eens serieus neemt' aan dat je blijkbaar niet in staat bent om de gehele code op waarde te schatten. In plaats daarvan pik je er nu 1 elementje uit waarvan je waarschijnlijk ooit ergens gelezen hebt dat je dat beter niet kunt gebruiken, terwijl het in dit voorbeeld prima volstaat. Kortom datgene wat je zegt, slaat dus ook nog eens totaal nergens op.
Ik vind het prima hoor dat je reageert, maar laat het de volgende keer a.u.b een wat zinvoller opmerking zijn. Hier schiet niemand iets mee op.
** quote knip **
Met jou reactie ook niet, hier heb je moderators voor. En ja, als iemand een een 'clear' div gebruikt weet ik inderdaad voldoende. 'Terwijl het in dit voorbeeld prima volstaat', zou betekenen dat ik het ook in tabellen kan doen. Omdat iets kan betekend niet dat het volstaat. Maar he, jij weet over het algemeen vaak beter :-)
Aangezien ik mijn vorige bericht niet kan wijzigen. Hier een CSS voorbeeldje van hoe het kan zonder gebruik te maken van Javascript (voeg dit samen met het antwoord van Frank Nietbelangrijk en klaar).
Schitterend, alleen het doét niets. Op den duur zul je dit ergens aan moeten koppelen zodat het ook werkt en niet alleen maar mooi oogt.
De code hierboven (van mij) was een proof-of-concept. Toch een aardige score als je op een lap code van 144 regels enkel je beklag doet over een div hier of daar "teveel". Tenzij je niet verder las dan die regel die je blijkbaar mateloos triggerde. In dat geval doe je jezelf echt tekort of ben je gewoon een beetje snobistisch bezig.
En als je naar de JavaScript had gekeken dan had je hier wellicht een recept in kunnen zien voor het bouwen van andere geavanceerde formulier-elementen die, zoals gezegd, ook nog eens prima herbruikbaar zijn.
Maar nee, die ene HTML-regel, dat is echt onacceptabel... Hoe kortzichtig kun je zijn? Gebruik gewoon de dingen die je wilt gebruiken en doe de rest lekker op je eigen superieure manier.
