Использование переменной с jQuery addClass()

Question

Я новичок в JS и jQuery, но я пытался использовать addClass() и removeClass с некоторыми переменными Javascript и не знаю, что я делаю неправильно.

У меня есть эта система оценки 1-5 звезд.

Я хочу, чтобы он менял классы при зависании и сохранении рейтинга при нажатии.

HTML, выглядит следующим образом:

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

и так далее для сгустков 2-5.

JS я в настоящее время является

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; 
 
});

Это не работает-я уверен, что я не знаю, как обращаться с переменными с JQuery, но не может найдите любую статью о том, что я должен делать.

Я тестировал его, и если я использую $("#blob1") вместо $(blob1), он работает, но я бы хотел использовать переменные, потому что у меня больше в плане.

Answer 1

Вы не за горами. Вам нужно будет настроить два набора прослушивателей событий: один, когда пользователь нажимает на звезду, и один, когда пользователь навешивается над звездой.

Предлагаю сохранить «оценку» как переменную. Когда пользователь нажимает на звездочку, вы настраиваете рейтинг. Я использовал атрибут data, чтобы отслеживать значение каждой звезды. После настройки рейтинга вы прокручиваете элементы и соответственно добавляете или удаляете классы.

Hovering добавляет слой сложности. Каждый раз, когда вы наводите курсор мыши, вам нужно будет перебрать элементы звезды и обновить классы, как если бы это был новый рейтинг. Когда вы выберете мышь, вы снова обновите классы в соответствии с сохраненным вами рейтингом.

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'); 
    } 
} 

Смотрите эту jsfiddle: https://jsfiddle.net/ffz5y9fm/5/

Answer 2

Непроверенные:

<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> 

Если что-то не работает только сообщать здесь.