javascriptjqueryimagerating-system

Simple rating system

I'm trying to make a rating system, but I have some problems.

here's my html:

<div id="div-stars1">                   
    <img src="assets/imagens/star_empty_na.png" style="width: 25px" id="img-starsna">
    <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star1">
    <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star2">
    <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star3">
    <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star4">
    <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star5">                              
</div>

<div id="div-stars2">                   
    <img src="assets/imagens/star_empty_na.png" style="width: 25px" id="img-starsna">
    <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star6">
    <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star7">
    <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star8">
    <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star9">
    <img src="assets/imagens/star_empty.png" style="width: 25px" class="img-stars" id="img-star10">                             
</div>

Well, I'll need to have several block codes like this, but I wouldn't like to have many functions to this (# div-stars3, # div-stars4 ... #divstars20). Yes, there are many questions from my poll, but I do not want to repeat code, I mean, I do not want to code any of the same things ($ ("# div-stars1").mouseover (function () {....}), $ ("# div-stars2").mouseover (function () {....}), $ ("# div-stars3")..... So, I'd like some advice from which way to go. I care for a clean, lean and dynamic code.

I did the rating system just with one block code div, no more than one. Now I need to do with many block codes, many questions with many stars, each one answering for your <div>

Thanks.

Solution

  • You could add a class to all divs and use the Class Selector:

    $( ".class" ).on( "mouseover", function() {
  ...
});

    If you don't want to use classes, you might want to do what @John Wu suggested. It works the same.

    Then, to know which div triggered the function, you can use event.target:

    $( ".class" ).on( "mouseover", function() {
  // alert the id of the hovered div
  alert( event.target.id );
});

    Hope this answers your question.