0

Помогите! Рейтинг реализован на чистом CSS и Html.Нужно чтобы после перезагрузки выбор пользователя оставался. Например пользователь вибрал 4 звездочки презагрузка старници чтоби оставалось 4 звьоздочки. Спасибо)

CSS

#reviewStars-input input:checked ~ label, #reviewStars-input label, 
#reviewStars-input label:hover, #reviewStars-input label:hover ~ label {
background: url('http://positivecrash.com/wp-content/uploads/ico- 
s71a7fdede6.png') no-repeat;}

#reviewStars-input {
overflow: hidden;
zoom: 1;
position: relative;
float: left;}

#reviewStars-input input {
opacity: 0;
width: 43px;
height: 40px;
position: absolute;
top: 0;
z-index: 0;}

#reviewStars-input input:checked ~ label {
background-position: 0 -40px;
height: 40px;
width: 43px;}

#reviewStars-input label {
background-position: 0 0;
height: 40px;
width: 43px;
float: right;
cursor: pointer;
margin-right: 10px;
position: relative;
z-index: 1;}

#reviewStars-input label:hover, #reviewStars-input label:hover ~ label {
background-position: 0 -40px;
height: 40px;
width: 43px;}

#reviewStars-input #star-0 {
left: 0px;}

#reviewStars-input #star-1 {
left: 53px;}

#reviewStars-input #star-2 {
left: 106px;}

#reviewStars-input #star-3 {
left: 159px;}

#reviewStars-input #star4 {
left: 212px;}

#reviewStars-input #star-5 {
left: 265px;}

Html

<div id="reviewStars-input">
<input id="star4" type="radio" name="reviewStars"  />
<label title="5" for="star4"></label>
<input id="star-3" type="radio" name="reviewStars"/>
<label title="4" for="star-3"></label>
<input id="star-2" type="radio" name="reviewStars"/>
<label title="3" for="star-2"></label>
<input id="star-1" type="radio" name="reviewStars"/>
<label title="2" for="star-1"></label>
<input id="star-0" type="radio" name="reviewStars"/>
<label title="1" for="star-0"></label>
</div>

JS

window.onload = function(){
if (localStorage.getItem('startr')!==null)
var image = localStorage.getItem('startr');
document.getElementsByTagName('star-1')[0].style.background = image;

document.getElementById('star4').onclick = function(){
    console.log('work');
    document.getElementsByTagName('star4')[0].style.background = 
'http://positivecrash.com/wp-content/uploads/ico-s71a7fdede6.png';
    localStorage.setItem('startr','http://positivecrash.com/wp-        
content/uploads/ico-s71a7fdede6.png');
}
}
5
  • А что попробовали? Что получилось, а что нет? 23 мая 2018 в 12:17
  • Пробовал с помощью js зафиксировать позицию изображения при выборе не получалось((( 23 мая 2018 в 12:22
  • js window.onload = function(){ if (localStorage.getItem('startr')!==null) var image = localStorage.getItem('startr'); document.getElementsByTagName('star-1')[0].style.background = image; document.getElementById('star4').onclick = function(){ console.log('work'); document.getElementsByTagName('star4')[0].style.background = 'positivecrash.com/wp-content/uploads/ico-s71a7fdede6.png'; localStorage.setItem('startr','positivecrash.com/wp-content/uploads/ico-s71a7fdede6.png'); } } 23 мая 2018 в 12:25
  • Пожалуйста, добавьте этот код в вопрос, в комментарии его читать очень трудно. Там есть кнопка "Править", вот ее нажмите. 23 мая 2018 в 12:32
  • Все добавил js ) 23 мая 2018 в 12:51

1 ответ 1

0

У Вас в примере идет работа с локальным хранилищем, если же нужно работать с куками то вот мануал https://learn.javascript.ru/cookie по которому можно будет добавить функции, которыми затем можно пользоваться. Не очень понял логику работы цсс, описания этого нет и песочницы тоже, так что приходится предполагаться на свои догадки.

Основная идея такая: в момент загрузки страницы, тобишь событие onload(end), добавляем обработчик (это уже есть), который будет получать из кукисов/локального хранилища выбранные элементы, и затем в цикле по этим элементам отмечать или отмечать один элемент в зависимости от значения (этого еще нет рабочего).

У вас сохраняется картинка при клике на 4 звездочку, а надо чтоб обработчик клика был на все звездочки, и этот обработчик сохраняет путь к картинке а не числовое значение рейтинга (которое затем можно использовать обработчике onload, но можно и сохранять картинку, если не нравится вариант с значением рейтинга), а при загрузке страницы обработчик эту картинку (если она есть) сетит в document.getElementsByTagName('star-1')[0].style.background = image; первый тэг 'star-1' который и не работает, потому что такого тэга не существует как в вашем примере так и в принципе в стандарте.

Для хранения нескольких элементов (рейтингов) отлично подойдет массив из пар ключ-значение, где ключом может быть идентификатор пользователя (см. ниже). Если же надо только один рейтинг то вполне подойдет сохранение значения (числового) по произвольному ключу (туда куда у Вас сохраняется картинка, лучше сохранять не картинку а числовой рейтинг), затем в момент загрузки страницы получать это значение либо с кук(либо с локального хранилища) и, например, добавлять class "active" у элемента (лучше с дата атрибутом которое равное этому числу) с id="star-'полученноеЧисло'. (Добавить в стили для active class которые и будут уже иметь путь к картинке).

Если нужно сохранять несколько рейтингов: Предлагаю в качестве ключей использовать ID DOM элемента. Например <div id="reviewStars-input"> сюда можно добавить еще и дата атрибут <div id="reviewStars-input" data-user-id="1234">. Затем получив массив выбранных значений, в js отмечать чекбоксы. Либо добавлять новые значения в массив.

1
  • в итоге у Вас не работает эта часть кода document.getElementsByTagName('star-1')[0].style.background = image; потому что тэга такого не существует
    – Zeta BiT
    23 мая 2018 в 14:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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