在jQuery addClass（）中使用变量

Question

I'm new to JS and jQuery but I've been trying to use the addClass() and removeClass with some Javascript variables and don't know what I'm doing wrong.

I have this 1–5 star rating system.

I want it to change classes when hovering and save rating when I click.

The HTML looks like this:

 <span class="icon-rating-empty" id="blob1"></span> 

and so on for blobs 2–5.

The JS I currently have is

 var blob1 = document.getElementById('blob1'); var blob2 = document.getElementById('blob2'); var blob3 = document.getElementById('blob3'); var blob4 = document.getElementById('blob4'); var blob5 = document.getElementById('blob5'); var rating = 0; blob1.addEventListener('hover', function() { $(blob1).addClass("icon-rating-full").addClass("green-blob").removeClass("icon-rating-empty") }, function() { $(blob1).addClass("icon-rating-empty").removeClass("green-blob").removeClass("icon-rating-full") }); blob1.addEventListener('click', function() { rating = 1; }); 

This doesn't work—I'm sure I don't know how to handle variables with the jQuery, but can't find any article on what I'm supposed to do.

I've tested it and if I use $("#blob1") instead of $(blob1) it works, but I'd like to use the variables because I have more in plan.

Answer 1

You're not far off. You will need to set up two sets of event listeners: one for when the user clicks on a star, and one for when the user hovers over a star.

I suggest saving the "rating" as a variable. When the user clicks a star, you adjust the rating. I used a data attribute to keep track of the value of each star. After adjusting the rating, you loop through the elements and add or remove classes accordingly.

Hovering adds a layer of complexity. Every time there is mouseover, you will need to loop over the star elements and update the classes as though that was the new rating. When you mouseout, you will update the classes again according to the rating that you saved.

var rating = 0;
var stars = $('li');

// Set up listeners
$('li').on('click', function(){
    rating = parseInt($(this).data('val'));
  drawStars(rating);
});

$('li').hover(
    function(){
    tempRating = parseInt($(this).data('val'));
    drawStars(tempRating);
  },
  function(){
    drawStars(rating);
  }
);

// This function loops through the "star" elements and adds and removes a 'selected' class
function drawStars(numStars){
    // Reset the colour by removing the selected class from all elements
  for(var i = 0; i < stars.length; i++){
    $(stars[i]).removeClass('selected');
  }
  // Add a selected class to some of the elements
  for(var i = 0; i < numStars; i++){
    $(stars[i]).addClass('selected');
  }
}

See this jsfiddle: https://jsfiddle.net/ffz5y9fm/5/

Answer 2

Untested:

<span class="rating">
<span data-star="0">STAR</span>
<span data-star="1">STAR</span>
<span data-star="2">STAR</span>
<span data-star="3">STAR</span>
<span data-star="4">STAR</span>
<span data-star="5">STAR</span>
</span>

<script>
try{
var elements = document.querySelectorAll('.rating'), 
    listener = function(e){
       var a = this, parent = a.parentNode, value = parseInt( a.getAttribute('data-star') );
       // reset
       parent.classList = 'rating';
       // add class
       parent.classList.add( 'star-'+value );
    };


// get all elements and attach listener
for( var i = 0; i < elements.length; ++i ){
  var current = elements[i], childs = current.children;
    for( var ii = 0; ii < childs.length; ++ii ){
      childs[ii].addEventlistener('mouseenter',listener,false);
    }
}

} catch(e){ console.log('error',e); }
</script>

If something doesn't work just report here.