Как показать значение рейтинга после нажатия на значки рейтинга

Я использовал эту оценку jQuery. Вот моя скрипка. Вы увидите, что если вы наведете курсор на значки звездочек рейтинга, значение значков будет показано справа (красная метка на скриншоте).

Но после нажатия на значки это значение исчезнет. Я хочу, чтобы это значение сохранялось и после нажатия на значок. Как я могу это сделать?

jQuery:

$('.hover-star').rating({
  focus: function(value, link){
    var tip = $('.hover-test');
    tip[0].data = tip[0].data || tip.html();
    tip.html(link.title || 'value: '+value);
  },
  blur: function(value, link){
    var tip = $('.hover-test');
    $('.hover-test').html(tip[0].data || '');
  }
});

javascript jquery rating-system
person user1896653    schedule 20.08.2014    source источник
comment
В вашей скрипке значение остается после нажатия звезды   -  person Yuriy Galanter    schedule 20.08.2014

Ответы (2)


arrow_upward
1
arrow_downward

Функция размытия удаляет текст с этикетки. Вы можете остановить это, просто используя оператор if.

  if ( type[0].data != '' )  {
      $('.hover-test').html(tip[0].data);
  }

Скрипт: http://jsfiddle.net/tvn4Ldmn/10/

Если вы хотите, чтобы значение оставалось только после того, как вы нажали, вам также необходимо проверить, нажали ли вы.

  if ( type[0].data != '' || has_clicked == false )  {
      $('.hover-test').html(tip[0].data || '');
  }

Примечание. has_clicked — это всего лишь пример. Логика «щелчка» не включена в ваш код или скрипку. Вы можете посмотреть на звездочки для класса star-rating-on, чтобы определить, щелкнул ли пользователь. Я верю, что это сработает.

Обновление (на основе комментария автора)

Если вы хотите, чтобы в тексте сохранялось значение, на которое первоначально нажали, вам нужно использовать переменную. Переменная должна быть «откатом», о котором говорилось выше (заменяя пустую строку, '').

Вам нужна переменная, которая входит в область действия других ваших функций. Вы можете использовать глобальную переменную (window.variable_name), но это не очень удобно. Вы также можете просто поместить переменную перед другими функциями. Прочтите о области видимости переменных для получения дополнительной информации.

var selected_rating = '';

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

$('.hover-test').html(tip[0].data || selected_rating);

Наконец, пара функций, которые запомнят, на какую звезду ранее нажимали, а также поддержку кнопки сброса.

 // Reset the selected rating:
 $('.rating').on('click', 'div.rating-cancel', function() {
   selected_rating = '';
   $('.hover-test').html('');
});

 // Remember a rating when it is selected:
 $('.rating').on('click', 'div.star-rating', function(e) {
   selected_rating = jQuery(this).find('a').attr('title');
   $('.hover-test').html(selected_rating);
 });

Скрипт/демонстрация: http://jsfiddle.net/tvn4Ldmn/16/

person Radley Sustaire    schedule 20.08.2014
comment
если вы нажмете на значок 3-й звезды, значение будет установлено как «ОК». После того, как вы наведете курсор на любой значок, например, на значок 4-й звезды, это значение (Хорошо) будет установлено вместо предыдущего ОК. Это нормально, но после того, как вы оставите указатель мыши, должно быть возвращено «ОК». Потому что вы просто наводите курсор на 4-й значок, но все равно выбран 3-й значок. Таким образом, ok не следует заменять навсегда, пока не будет нажат другой значок. - person user1896653; 20.08.2014
comment
Я обновил свой ответ, чтобы текст оставался и очищался. Он основан на щелчке вместо наведения. Немного хакерский, лучший способ — работать с рейтинговым плагином напрямую, а не работать вместе с ним, но это должно помочь вам начать. - person Radley Sustaire; 21.08.2014
comment
Спасибо! Но мне нужна другая помощь. По сути, я должен разместить несколько оценок на одной странице. Таким образом, они должны быть независимыми (одно рейтинговое действие не должно влиять на другие). Для этого я использовал $(this).children('.hover-test') Но это не сработало. jsfiddle.net/tvn4Ldmn/17 Также на вашей обновленной скрипке, если я сброшу рейтинг, нажав - кнопку и после этого наведите указатель мыши на любой значок (не щелкайте), значение снова будет установлено навсегда! - person user1896653; 21.08.2014
comment
Я бы посоветовал провести небольшое исследование с помощью плагина звездного рейтинга jQuery — демоверсии. Тест 3-A обеспечивает обратный вызов при нажатии на звездочку. Вы можете использовать его вместо моего кода $('.rating').on('click', .... Это также разделит разные рейтинги, если вы работаете с this вместо селектора класса jquery. Однако я не смог воспроизвести вашу вторую проблему. - person Radley Sustaire; 21.08.2014

arrow_upward
0
arrow_downward

Взгляните на этот модифицированный JSFiddle: http://jsfiddle.net/tvn4Ldmn/1/:

blur: function (value, link) {
    var tip = $('.hover-test');
    var select = $('.rating').find('.star-rating-on:last');
    if (select.length > 0) {
        tip.html(select.find('a')[0].title);
    }
}

То, что делал ваш предыдущий код (как упоминалось в RadGH), удаляло текст в функции размытия. Просматривая щелкнутую (выбранную) оценку и беря последний звездный элемент с классом 'star-rating-on', вы можете эффективно оставить выбранное значение после того, как указатель мыши покинет область рейтинга.

person Mats Adborn    schedule 20.08.2014