Verander fa fa icon bij muis overlay
Code (php)
1
2
3
4
5
2
3
4
5
<a href="#"><span class="fa fa-star" style="color:gold;"></a>
<a href="#"><span class="fa fa-star" style="color:gold;"></a></span>
<a href="#"><span class="fa fa-star" style="color:gold;"></a></span>
<a href="#"><span class="fa fa-star" style="color:gold;"></a></span>
<a href="#"><span class="fa fa-star-o" style="color:gold;"></a></span>
<a href="#"><span class="fa fa-star" style="color:gold;"></a></span>
<a href="#"><span class="fa fa-star" style="color:gold;"></a></span>
<a href="#"><span class="fa fa-star" style="color:gold;"></a></span>
<a href="#"><span class="fa fa-star-o" style="color:gold;"></a></span>
Is het mogelijk als je de muis op het icoontje houd, dat het icoontje in fa fa-star-o verandert wordt?
En als dit mogelijk is. Hoe?
Code (php)
1
2
3
2
3
<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> I love PHPhulp
</div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> I love PHPhulp
</div>
JavaScript (jQuery)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("div").hover(function () {
// hover in
var icon = $("span.glyphicon", this);
var remCls = "glyphicon-heart-empty",
addCls = "glyphicon-heart"
icon
.removeClass(remCls)
.addClass(addCls);
}, function () {
// hover out
var icon = $("span.glyphicon", this);
var remCls = "glyphicon-heart",
addCls = "glyphicon-heart-empty"
icon
.removeClass(remCls)
.addClass(addCls);
});
// hover in
var icon = $("span.glyphicon", this);
var remCls = "glyphicon-heart-empty",
addCls = "glyphicon-heart"
icon
.removeClass(remCls)
.addClass(addCls);
}, function () {
// hover out
var icon = $("span.glyphicon", this);
var remCls = "glyphicon-heart",
addCls = "glyphicon-heart-empty"
icon
.removeClass(remCls)
.addClass(addCls);
});
Zie ook:
https://jsfiddle.net/b1gc4a7g/1/
Gewijzigd op 12/03/2018 17:17:02 door - Ariën -
Code (php)
1
2
3
2
3
.fa-star:hover:before {
content: "\f006";
}
content: "\f006";
}
https://codepen.io/anon/pen/NYGaeY
Gewijzigd op 13/03/2018 00:08:47 door Frank Nietbelangrijk
Nu probeer ik dat als ik mijn muis op de tweede houd, de eerste ook verandert.
Ik ben echt een CSS noob en begrijp de code waar ik mee werk niet echt.
Hopelijk kan iemand mij dit uitleggen:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
.btn-warning .fa-star,
.btn-warning:hover .fa-star-o {
display: none;
}
.btn-warning:hover .fa-star {
display: inline;
}
.btn-warning:hover .fa-star-o {
display: none;
}
.btn-warning:hover .fa-star {
display: inline;
}
Dit werkt en maakt 1 sterretje gekleurd.
Nu probeer ik op de volgende manier ook de 1e te kleuren wanneer je hem op de tweede houdt, maar dit lukt niet. Wat doe ik verkeerd?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.btn-warning2 .fa-star,
.btn-warning2:hover .fa-star-o {
display: none;
}
.btn-warning2:hover .fa-star {
display: inline;
}
.btn-warning:hover .fa-star-o {
display: none;
}
.btn-warning:hover .fa-star {
display: inline;
}
<a href="#" class="btn-warning">
<span class="fa fa-star-o" style="color:gold;" title="Rate this thread with 1 star"></span>
<span class="fa fa-star" style="color:gold;" title="Rate this thread with 1 stars"></span>
</a>
<a href="#" class="btn-warning2">
<span class="fa fa-star-o" style="color:gold;" title="Rate this thread with 2 stars"></span>
<span class="fa fa-star" style="color:gold;" title="Rate this thread with 2 stars"></span>
</a>
.btn-warning2:hover .fa-star-o {
display: none;
}
.btn-warning2:hover .fa-star {
display: inline;
}
.btn-warning:hover .fa-star-o {
display: none;
}
.btn-warning:hover .fa-star {
display: inline;
}
<a href="#" class="btn-warning">
<span class="fa fa-star-o" style="color:gold;" title="Rate this thread with 1 star"></span>
<span class="fa fa-star" style="color:gold;" title="Rate this thread with 1 stars"></span>
</a>
<a href="#" class="btn-warning2">
<span class="fa fa-star-o" style="color:gold;" title="Rate this thread with 2 stars"></span>
<span class="fa fa-star" style="color:gold;" title="Rate this thread with 2 stars"></span>
</a>
Gewijzigd op 13/03/2018 15:31:19 door Jasper Schellekens
Wat moet er gebeuren als je over een ster hovert:
1. alle sterren moeten eerst inactief gemaakt worden, zodat je met een schone lei begint (initialisatie).
2. alle sterren tot en met de ster waar je over hovert moeten ingekleurd worden.
Goed, nu je een duidelijk idee hebt over wat er moet gebeuren kun je dit op duizend-en-één manieren uitrollen.
Succes.
Verder heb ik ook aangegeven dat ik er mee vast zit. Dat er in joun woorden duizen-en-één manieren zijn had ik mijzelf ook al bedacht. Als ik zou weten hoe zou ik dit topic niet aanmaken.
Gewijzigd op 13/03/2018 16:06:58 door Jasper Schellekens
Het probleem is hier niet het probleem, maar het is de benadering/aanpak/het tacklen van het probleem.
Daarnaast de realisatie dat je vraagstuk niet uniek is. Een heleboel anderen stonden voor deze "barrière". Als je 5 minuten Googled heb je waarschijnlijk ook tig oplossingen.
De reden dat ik dit (en het vorige) antwoord (in deze vorm) geef is dus niet zozeer vanwege dit specifieke probleem, maar meer omdat je wel erg vaak naar een reeds bekende weg vraagt. Nu is het tijd dat je zelf een beetje leert kaartlezen, je hebt van jezelf genoeg bagage om dit op te lossen.
Gewijzigd op 13/03/2018 16:28:03 door Thomas van den Heuvel
Thomas van den Heuvel op 13/03/2018 16:26:22:
De reden dat ik dit (en het vorige) antwoord (in deze vorm) geef is dus niet zozeer vanwege dit specifieke probleem, maar meer omdat je wel erg vaak naar een reeds bekende weg vraagt. Nu is het tijd dat je zelf een beetje leert kaartlezen, je hebt van jezelf genoeg bagage om dit op te lossen.
Dus als jij vindt dat iemand vaker veel gestelde vragen stelt? dan geef je opeens zo een antwoord? No offense maar ik vind het een beetje vreemd..
Gewijzigd op 13/03/2018 16:34:22 door Jasper Schellekens
Thomas van den Heuvel op 13/03/2018 19:26:18:
Neh, geen javascript nodig: https://css-tricks.com/star-ratings/
(meteen demo kijken: https://css-tricks.com/examples/StarRating/ )
Gewijzigd op 13/03/2018 19:32:41 door Rob Doemaarwat
Bijvoorbeeld als volgt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!-- @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>
<!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>
> werkend voorbeeld
thxcomeagain
Modedit:
Een mening geven mag, maar houd het wel constructief en niet afkrakend!
Enige uitleg over hoe jij het anders zou doen is zeker prettig voor de anderen.
Enige uitleg over hoe jij het anders zou doen is zeker prettig voor de anderen.
Gewijzigd op 14/03/2018 10:40:17 door - Ariën -
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.
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 :-)
Edit:
Het integraal quoten van de eerstvolgende voorgaande reactie is onnodig.
Gewijzigd op 14/03/2018 12:46:48 door - Ariën -
Edit:
Zullen we het gezellig houden, en vanaf nu gewoon constructief reageren?
Ik heb geen zin om te moeten vegen in het topic.
Alvast bedankt!
Ik heb geen zin om te moeten vegen in het topic.
Alvast bedankt!
Gewijzigd op 14/03/2018 12:45:48 door - Ariën -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
.rating {
width: 260px;
}
.rating::after {
display: block;
height: 0;
clear: both;
}
.rating .star {
float: right;
display: block;
width: 50px;
height: 50px;
border: 1px solid #000000;
}
.rating .star:hover {
background-color: yellow;
}
.rating .star:hover ~ .star {
background-color: yellow;
}
</style>
</head>
<body>
<div class="rating">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</body>
</html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
.rating {
width: 260px;
}
.rating::after {
display: block;
height: 0;
clear: both;
}
.rating .star {
float: right;
display: block;
width: 50px;
height: 50px;
border: 1px solid #000000;
}
.rating .star:hover {
background-color: yellow;
}
.rating .star:hover ~ .star {
background-color: yellow;
}
</style>
</head>
<body>
<div class="rating">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</body>
</html>
@Thomas want hij wou graag een werkend iets.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style type="text/css">
.rating {
direction: rtl;
text-align: left;
}
.rating .star {
display: inline-block;
color: gold;
}
.rating .star::before,
.rating .star::before {
content: '\f006';
}
.rating .star:hover::before,
.rating .star.active::before {
content: '\f005';
}
.rating .star:hover ~ .star::before,
.rating .star.active ~ .star::before {
content: '\f005';
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$.fn.rating = function(options) {
return this.each(function() {
var settings = $.extend({
star : '.star',
activeCls : 'active',
input : 'input'
}, options);
var $this = $(this),
$stars = $(settings.star, $this),
$input = $(settings.input, $this),
current = parseInt($input.val());
if (current !== 0) {
$stars.eq($stars.length - current).addClass(settings.activeCls);
}
$stars.on('mouseover', function() {
$stars.removeClass(settings.activeCls).filter(this).addClass(settings.activeCls);
$input.val($stars.length - $(this).index());
});
});
};
$(document).ready(function() {
$('.rating').rating();
});
</script>
</head>
<body>
<div class="rating">
<i class="fa star"></i>
<i class="fa star"></i>
<i class="fa star"></i>
<i class="fa star"></i>
<i class="fa star"></i>
<input type="hidden" name="rating-1" />
</div>
<div class="rating">
<i class="fa star"></i>
<i class="fa star"></i>
<i class="fa star"></i>
<i class="fa star"></i>
<i class="fa star"></i>
<input type="hidden" name="rating-2" value="3" />
</div>
</body>
</html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<style type="text/css">
.rating {
direction: rtl;
text-align: left;
}
.rating .star {
display: inline-block;
color: gold;
}
.rating .star::before,
.rating .star::before {
content: '\f006';
}
.rating .star:hover::before,
.rating .star.active::before {
content: '\f005';
}
.rating .star:hover ~ .star::before,
.rating .star.active ~ .star::before {
content: '\f005';
}
</style>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$.fn.rating = function(options) {
return this.each(function() {
var settings = $.extend({
star : '.star',
activeCls : 'active',
input : 'input'
}, options);
var $this = $(this),
$stars = $(settings.star, $this),
$input = $(settings.input, $this),
current = parseInt($input.val());
if (current !== 0) {
$stars.eq($stars.length - current).addClass(settings.activeCls);
}
$stars.on('mouseover', function() {
$stars.removeClass(settings.activeCls).filter(this).addClass(settings.activeCls);
$input.val($stars.length - $(this).index());
});
});
};
$(document).ready(function() {
$('.rating').rating();
});
</script>
</head>
<body>
<div class="rating">
<i class="fa star"></i>
<i class="fa star"></i>
<i class="fa star"></i>
<i class="fa star"></i>
<i class="fa star"></i>
<input type="hidden" name="rating-1" />
</div>
<div class="rating">
<i class="fa star"></i>
<i class="fa star"></i>
<i class="fa star"></i>
<i class="fa star"></i>
<i class="fa star"></i>
<input type="hidden" name="rating-2" value="3" />
</div>
</body>
</html>
Gewijzigd op 14/03/2018 22:09:07 door Joakim Broden
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
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.