Заблокировать систему звездного рейтинга после голосования пользователя - Плагин RateIt jQuery

У меня есть плагин RateIt jQuery, работающий с приложением Django. Я использую Ajax для захвата значений, отправки их на сервер и обновления значений на странице.

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

Но с точки зрения юзабилити, я думаю, лучше разрешить пользователю устанавливать рейтинг один раз, два или, в моем случае, 5 раз. Я использую что-то из документов, которое почти делает то, что я хочу:

$(ri).rateit('readonly', !$(ri).rateit('readonly'));

Я поднимаю счетчик в сценарии (например, counter++;) и внутри оператора if устанавливаю значение readonly. Проблема в том, что если пользователь снова щелкает звездочки, он переключает режим write (не readonly).

Каждый щелчок после этого просто переключает режим readonly.

ОБНОВЛЕНИЕ

С помощью @Gidon (создателя RateIt, я полагаю) я решил эту проблему. Вот фрагмент сценария Ajax. Я запустил счетчик вне вызова Ajax с помощью counter = 0;, а затем повторил его с помощью counter++; и использовал это для проверки:

if (counter >= 3) {
    $(ri).rateit('readonly', true);
    $('.rateit').off('click');
}

Я перевел его в режим readonly и удалил привязку кликов с помощью jQuery off().

Спасибо за помощь @Gidon. Это работает нормально. Пользователь может обновить страницу и получить больше голосов, но у меня есть несколько идей, как использовать сеансы, чтобы предотвратить это...


person nicorellius    schedule 12.02.2015    source источник


Ответы (1)


Переключение происходит из-за этой части: !$(ri).rateit('readonly'). Это сборка из двух частей ! и $(ri).rateit('readonly'). Восклицательный знак (!) является логическим оператором «не» и отрицает все, что следует за ним ($(ri).rateit('readonly').

Итак, он говорит: возьмите текущее значение свойства только для чтения и переверните его, создав таким образом эффект переключения.

Что вы хотите сделать, это:

$(ri).rateit('readonly', true);

Что переводит его в режим только для чтения.

person Gideon    schedule 18.02.2015
comment
Боже, теперь я чувствую себя манекеном ;-) Спасибо, что обратились к нам, кстати. Я очень ценю это. Клянусь, я пробовал этот и другие подходы, такие как $('.rateit').attr('data-rateit-readonly', 'true');, но безрезультатно. Может быть, я пробовал что-то подобное... В любом случае, еще раз спасибо. отличный плагин! - person nicorellius; 18.02.2015
comment
Ах да, еще один быстрый вопрос. Я выполнил вашу рекомендацию, и это сработало. Но у меня все еще есть давняя проблема, когда звезды (в режиме readonly) все еще нажимаются. Это замаскированные радиокнопки, верно? Мне их тоже отключать? Я ожидаю Ajax для события click (для отправки данных на сервер), так что, возможно, это моя проблема. - person nicorellius; 18.02.2015
comment
Он может использовать переключатели, элемент диапазона или элемент выбора. Но основное использование (которое ищет div/span с классом rateit) ничего не использует для маскировки. Глядя на обновление своего ответа, вы добавляете свой собственный прослушиватель событий к компоненту оценки, однако вы можете использовать встроенные события, которые заботятся о случае только для чтения. $('.rateit').on('rated', ....) - person Gideon; 19.02.2015
comment
Итак, я мог бы сделать что-то вроде: $('.rateit').on('rated', function() { $(ri).rateit('readonly', true); }); ? - person nicorellius; 19.02.2015
comment
Да, это будет означать, что после оценки он будет переведен в режим только для чтения. Очень похоже на один из примеров на моей тестовой странице (см. radioactivethinking.com/rateit/ пример/example.htm#ex_11) - person Gideon; 19.02.2015
comment
Черт, я пропустил это ... Я действительно использовал ваш фрагмент для метода Ajax, но, должно быть, удалил эту строку непреднамеренно (и / или по незнанию). Мои извинения за то, что я не понял... Еще раз спасибо. отличный плагин! - person nicorellius; 20.02.2015
comment
Извините, что продолжаю вас бить, но у меня есть еще один вопрос. Я пытаюсь отцепить звезды от дополнительных кликов, вызывающих Ajax-скрипт, переведя их в режим readonly. Хотя это успешно, если я не использую $('.rateit').off('click');, пользователь может щелкнуть звездочки в режиме readonly, и значения все равно будут отправлены на сервер. С функцией off() звезды не кликабельны (данные не отправляются), но я вижу эту странную задержку до того, как это произойдет, например, если пользователь наводит курсор на звезды влево, значение зависает через долю секунды. - person nicorellius; 21.02.2015
comment
Спасибо за это! Это просто помогло мне решить мою проблему. - person Duplosion; 18.09.2015