Учу JS/jQuery, написал вот такой рейтинг(не без помощи стак). Как можно упростить js или jquery код(не добавляя одно в другое).
P.S. Я думаю вопрос будет полезен и для тех кому нужны будут подобные звездочки, если нет - закидайте минусами :(
Первый пример: чистый JS
<div class="stars">
<span class="star active"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
// Родитель элементов star
var parentItems = document.querySelector('.stars');
// Массив из всех star
var allItems = document.querySelectorAll('.stars .star');
// Количетсво активных элементов
var activeItems = document.querySelectorAll('.stars .star.active').length;
// Функция проверяет куда нажали и меняет классы
var cStars = function(nowPos) {
// Убираем у всех элементов active
for (var i = 0; allItems.length > i; i++) {
allItems[i].classList.remove('active');
}
// Добавляет активный класс всем элементам до выбранного, включая выбранный
for (var i = 0; nowPos + 1 > i; i++) {
allItems[i].classList.toggle('active');
}
}
// При наведении
parentItems.addEventListener('mouseover', function(e) {
var myTarget = e.target;
// Длина массива
var i = allItems.length;
// Находи выбранный элемент в массиве и заносим его индекс в переменную
while(i--) {
if(allItems[i] == myTarget) {
var currentIndex = i;
break;
}
}
cStars(currentIndex);
});
// При клике
parentItems.addEventListener('click', function(e) {
// Выбранный элемент
var myTarget = e.target;
// Длина массива
var i = allItems.length;
// Находи выбранный элемент в массиве и заносим его индекс в переменную
while(i--) {
if(allItems[i] == myTarget) {
var currentIndex = i;
break;
}
}
cStars(currentIndex);
// Меняем количество активных айтемов
activeItems = document.querySelectorAll('.stars .star.active').length;
});
// При мауслив
parentItems.addEventListener('mouseleave', function(e) {
cStars(+activeItems - 1);
});
.stars {
font-size: 0px;
}
.star {
display: inline-block;
background: green;
transition: all .5s ease;
width: 25px;
height: 25px;
border-radius: 50%;
}
.star.active {
background: blue;
}
<div class="stars">
<span class="star active"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
Второй пример jQuery:
var cStars = function(nowPos) {
// У всех убираем active
$('.stars .star').removeClass('active');
for (var i = 0; nowPos + 1 > i; i++) {
$('.stars .star').eq(i).toggleClass('active');
}
}
// переменная содержит количество активных звезд
var starsCount = $('.star.active').length;
// При наведении
$('.stars .star').hover(function() {
cStars($(this).index());
});
// При клике
$('.stars .star').click(function() {
cStars($(this).index());
// меняем количество по клику
starsCount = $('.star.active').length;
});
// Как только отводим мышку, возвращаем количество активных айтемов, которые были изначально
$('.stars .star').on('mouseleave', function() {
cStars(+starsCount - 1);
});
.stars {
font-size: 0px;
}
.star {
display: inline-block;
background: green;
transition: all .5s ease;
width: 25px;
height: 25px;
border-radius: 50%;
}
.star.active {
background: blue;
}
<div class="stars">
<span class="star active"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
https://codepen.io/dean992008/pen/vREOgm