3

Учу 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>

2
  • 1
    Впринципе можно вообще без JS это написать: https://codepen.io/dean992008/pen/vREOgm Commented 9 мар. 2018 в 16:19
  • @ДмитрийМирошниченко , я в курсе) я спрашивал для улучшения собственного кода) Но спасибо. Commented 10 мар. 2018 в 6:08

1 ответ 1

1

Вот нашёл для вас пару примеров:

  1. jQuery

    jQuery(document).ready(function($) {    
    $('.rating .star').hover(function() {
      $(this).addClass('to_rate');
      $(this).parent().find('.star:lt(' + $(this).index() + 
    ')').addClass('to_rate');
    $(this).parent().find('.star:gt(' + $(this).index() + 
      ')').addClass('no_to_rate');
      }).mouseout(function() {
        $(this).parent().find('.star').removeClass('to_rate');
        $(this).parent().find('.star:gt(' + $(this).index() + 
        ')').removeClass('no_to_rate');
      }).click(function() {
    $(this).removeClass('to_rate').addClass('rated');
    $(this).parent().find('.star:lt(' + $(this).index() + 
      ')').removeClass('to_rate').addClass('rated');
      $(this).parent().find('.star:gt(' + $(this).index() + 
      ')').removeClass('no_to_rate').removeClass('rated');
    /*Save your rate*/
    /*TODO*/
    });
    });
    
  2. JS + sass

    $('.stars li').on('click', function() {
      var el = $(this);
      el.addClass('active').siblings().removeClass('active');
      $('#rating').val( el.attr('title') ); // save value
    });
    
  3. Кроме того есть приятные плагины для этих целей тут

Смысл кода везде один и тот же, подстановка классов при нажатии, а также изменение вида звёздочки при наведении.

Бонус Мне понравилось больше всего.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.