Звездный рейтинг для мобильной версии сайта

@Alexvp · Регистрация: 03.08.2014

Author24 — интернет-сервис помощи студентам

Вариантов звездных рейтингов через Ajax для десктопа много.
Но столкнулся с проблемой неудобства выставления рейтинга, если вместо мышки используется палец при просмотре на экране смартфона. Если мышкой я могу вести вдоль звездочек, их подсвечивая и лишь потом кликая по выбранной звезде, то пальцем я сразу вызываю клик.

Подскажите какое решение лучше использовать в данном случае?

Добавлено через 20 часов 57 минут
Сутки гуглил и ничего стоящего не нашел. Поэтому плюнул и сделал примитивный рейтинг типа +1/-1. С помощью пары кнопок.

@Shakalaka · 24.03.2016, 15:37

Сообщение от Alexvp

Сутки гуглил и ничего стоящего не нашел. Поэтому плюнул и сделал примитивный рейтинг типа +1/-1. С помощью пары кнопок.

событие touchstart реагирует на тач, прикручиваем eventListener к звездочке, по тачу красим звездочку, и показываем скрытую кнопку "rate"

HTML5

<div class="rating">
  <img  class="img-responsive" src="https://lh6.ggpht.com/z8rGcobymHcqSLtHpIsa42YdiuWOgl1tenbpuoAXRVFmIpdwCPCRZVmlZzQFdnqTOw=w300" alt="cat">
  <svg class="star" data-rating="1" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <svg class="star" data-rating="2" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <svg class="star" data-rating="3" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <svg class="star" data-rating="4" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <svg class="star" data-rating="5" viewBox="0 0 51 48">
  <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
  </svg>
  <button class="rate">Rate</button>
  <button class="clear">Clear</button>
</div>

Javascript

var stars = document.querySelectorAll(".star");
for(var i = 0, l = stars.length; i < l; i++){
    stars[i].addEventListener("click", function(){
    setStars(this);
    this.parentNode.querySelector(".rate").classList.add("show");
    this.parentNode.querySelector(".clear").addEventListener("click", clear);  
    this.parentNode.querySelector(".rate").addEventListener("click", rate);
  })
}
 
 
function setStars(star){
    var stars = star.parentNode.querySelectorAll(".star");
  var rating = 0;
  for(var i = 0, l = stars.length; i < l; i++){
    stars[i].classList.remove("selected");
  }
  for(var i = 0, l = stars.length; i < l; i++){
    if(+(stars[i].getAttribute("data-rating")) <= +(star.getAttribute("data-rating"))){
        stars[i].classList.add("selected");
      rating++;
      star.parentNode.setAttribute("data-rating", rating);
    }
  }
}
function clear(){
    var stars = this.parentNode.querySelectorAll(".star");
  var rate = this.parentNode.querySelector(".rate");
   for(var i = 0, l = stars.length; i < l; i++){
    stars[i].classList.remove("selected");
  }
  rate.classList.remove("show");
}
function rate(){
    alert("item rating: " + this.parentNode.getAttribute("data-rating"));
}

CSS

.star{
  display:inline-block;
  width:51px;
  height:48px;
  path{
    fill:#fff;
    stroke:#000;
  }
  &.selected path{
    fill:#000;
  }
}           
.rate{
  display:block;
  opacity:0;
  transition:opacity .2s;
  margin-bottom:20px;
  &.show{
    opacity:1;
  }
}
.clear{
  opacity:0;
  display:block;
  transition:opacity .2s;
}
.rate.show + .clear{
  opacity:1;
}
.img-responsive{
  display:block;
  max-width:100%;
}

https://jsfiddle.net/shakalaka/ur1cqgqm/

В функции rate отправляем ajax-ом на сервер реитинг, блокируем повторное нажатие

@Alexvp · 24.03.2016, 16:39 **[ТС]**

Супер! Большое спасибо!

@Alexvp 100 / 79 / 9 Регистрация: 03.08.2014 Сообщений: 447
		1
	Звездный рейтинг для мобильной версии сайта 24.03.2016, 14:07. Показов 1628. Ответов 2 Метки нет (Все метки) Вариантов звездных рейтингов через Ajax для десктопа много. Но столкнулся с проблемой неудобства выставления рейтинга, если вместо мышки используется палец при просмотре на экране смартфона. Если мышкой я могу вести вдоль звездочек, их подсвечивая и лишь потом кликая по выбранной звезде, то пальцем я сразу вызываю клик. Подскажите какое решение лучше использовать в данном случае? Добавлено через 20 часов 57 минут Сутки гуглил и ничего стоящего не нашел. Поэтому плюнул и сделал примитивный рейтинг типа +1/-1. С помощью пары кнопок. 0

@Alexvp 100 / 79 / 9 Регистрация: 03.08.2014 Сообщений: 447
	24.03.2016, 16:39 [ТС]	3
	Супер! Большое спасибо! 0

Опции темы

Звездный рейтинг для мобильной версии сайта

Решение