Звёздный рейтинг⭐⭐⭐⭐⭐
Всем добрый день!
Такая задача: нужно сделать звездный рейтинг, выводящий текст. Что готово: форма, сами звёзды, текст, меняющийся в зависимости от активной и "наведенной" звезд; Что не так: Если пользователь ткнул звезду, то текст "запоминает" только эту звезду и не меняется, если просто водить курсором по всем звездам; С чем нужна помощь: нужно сделать так, чтобы после того, как пользователь ткнул по какой-либо звезде, текст менялся при наведении на другие звезды, но если потом отвести курсор от звезд, должна отображаться та звезда, по которой был клик. https://codepen.io/bromble/pen/oNpvZPa |
bromble,
change: function (e, value) { if (value) { $('.your-choice-was').show(); $('.choice').addClass('add'); if (value == 1) { $('.btn1').mouseenter(function () { if($('.choice').is('.add')) return; $('.choice').text('Плохо, напишу рекомендацию!'); }); |
|
bromble,
$('#star1').starrr({ rating: 5, change: function (e, value) { if (value) { $('.your-choice-was').show(); $('.choice').addClass('add'); if (value == 1) { $('.choice').text('Плохо, напишу рекомендацию!'); } if (value == 2) { $('.choice').text('Ниже среднего'); } if (value == 3) { $('.choice').text('Средне'); } if (value == 4) { $('.choice').text('Хорошо'); } if (value == 5) { $('.choice').text('Отлично!'); } } else { $('.choice').removeClass('add'); $('.your-choice-was').hide(); } $("#rating").val(value); } }); $('.btn1').mouseenter(function () { if($('.choice').is('.add')) return; $('.choice').text('Плохо, напишу рекомендацию!'); }); $('.btn2').mouseenter(function () { if($('.choice').is('.add')) return; $('.choice').text('Ниже среднего'); }); $('.btn3').mouseenter(function () { if($('.choice').is('.add')) return; $('.choice').text('Средне'); }); $('.btn4').mouseenter(function () { if($('.choice').is('.add')) return; $('.choice').text('Хорошо'); }); $('.btn5').mouseenter(function () { if($('.choice').is('.add')) return; $('.choice').text('Отлично!'); }); |
Спасибо!
|
рони, а как можно допилить этот код так, чтобы надписи менялись и после клика, но нажатая надпись запоминалась браузером как и звезда?
|
звёздый рейтинг Starrr
bromble,
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> </head> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="css/starrr.css" rel=stylesheet /> <script src="js/starrr.js"></script> <body> <div class="container-fluid"> <br /> <div class="col-md-6" style="margin-left: 17px;"> <h2>Оценочка</h2> <br /> </p> <form id="fbForm"> <div class="feedback-block p-4 mt-4"> <div class="row align-items-center"> <div class="col-auto col-md-3"> <strong>Ваша оценка</strong> </div> <div class="col-6 col-md-9"> <div class="d-flex align-items-center"> <div class="starrr" id="star1"></div> <div> <span class="your-choice-was"> <span class="choice">Отлично!</span> </span> </div> <input type="hidden" name="rating" id="rating"> </div> </div> <div class="col-12 col-md-3 mt-3 mt-md-0"> <strong>Достоинства</strong> </div> <div class="col-12 col-md-9 mt-3"> <div class="form-group"> <textarea class="form-control p-blue" name="positive" id="positive" rows="3" placeholder="Что Вам понравилось?"></textarea> </div> </div> <div class="col-12 col-md-3"> <strong>Недостатки</strong> </div> <div class="col-12 col-md-9 mt-3"> <div class="form-group"> <textarea class="form-control p-blue" name="negative" id="negative" rows="3" placeholder="Что не соответствует Вашим ожиданиям?"></textarea> </div> </div> <div class="col-12 offset-md-3 col-md-9 mt-3"> <div class="row"> <div class="col-6 col-md-auto pr-0"> <b>Порекомендовали бы Вы нас своим друзьям и знакомым?</b> </div> <div class="col-6 col-md pl-0"> <div class="d-flex align-items-center justify-content-end"> <div class="form-check radio-item"> <input class="form-check-input" type="radio" name="refer" value="yes" id="refer_yes" checked> <label class="form-check-label" for="refer_yes"> Да </label> </div> <div class="form-check radio-item"> <input class="form-check-input" type="radio" name="refer" value="no" id="refer_no"> <label class="form-check-label" for="refer_no"> Нет </label> </div> </div> </div> </div> </div> <div class="col-12 offset-md-3 col-md-4 mt-4"> <button class="btn btn-block btn-green" id="datasend">Отправить</button> </div> </div> </div> </form> </div> <div class="col-md-2"></div> </div> <script> var slice = [].slice; (function($, window) { var Starrr; window.Starrr = Starrr = (function() { Starrr.prototype.defaults = { rating: void 0, max: 5, readOnly: false, emptyClass: 'fa fa-star-o', fullClass: 'fa fa-star', change: function(e, value) {}, messages: ['', 'Плохо, напишу рекомендацию!', 'Ниже среднего', 'Средне', 'Хорошо', 'Отлично!'] }; function Starrr($el, options) { this.options = $.extend({}, this.defaults, options); this.$el = $el; this.createStars(); this.syncRating(); if (this.options.readOnly) { return; } this.$el.on('mouseover.starrr', 'a', (function(_this) { return function(e) { return _this.syncRating(_this.getStars().index(e.currentTarget) + 1); }; })(this)); this.$el.on('mouseout.starrr', (function(_this) { return function() { return _this.syncRating(); }; })(this)); this.$el.on('click.starrr', 'a', (function(_this) { return function(e) { e.preventDefault(); return _this.setRating(_this.getStars().index(e.currentTarget) + 1); }; })(this)); this.$el.on('starrr:change', this.options.change); } Starrr.prototype.getStars = function() { return this.$el.find('a'); }; Starrr.prototype.createStars = function() { var j, ref, results; results = []; for (j = 1, ref = this.options.max; 1 <= ref ? j <= ref : j >= ref; 1 <= ref ? j++ : j--) { results.push(this.$el.append("<a href='#' class='btn" + j + "'/>")); } return results; }; Starrr.prototype.setRating = function(rating) { if (this.options.rating === rating) { rating = void 0; } this.options.rating = rating; this.syncRating(); return this.$el.trigger('starrr:change', rating); }; Starrr.prototype.getRating = function() { return this.options.rating; }; Starrr.prototype.syncRating = function(rating) { var $stars, i, j, ref, results; rating || (rating = this.options.rating); $('.choice').text(this.options.messages[rating] || ''); $('#rating').val(rating); $stars = this.getStars(); results = []; for (i = j = 1, ref = this.options.max; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) { results.push($stars.eq(i - 1).removeClass(rating >= i ? this.options.emptyClass : this.options.fullClass).addClass(rating >= i ? this.options.fullClass : this.options.emptyClass)); } return results; }; return Starrr; })(); return $.fn.extend({ starrr: function() { var args, option; option = arguments[0], args = 2 <= arguments.length ? slice.call(arguments, 1) : []; return this.each(function() { var data; data = $(this).data('starrr'); if (!data) { $(this).data('starrr', (data = new Starrr($(this), option))); } if (typeof option === 'string') { return data[option].apply(data, args); } }); } }); })(window.jQuery, window); $('#star1').starrr({ rating: 5 }); </script> </body> </html> |
ого, а в какую переменную тут идет выбранное значение?
|
Цитата:
|
Часовой пояс GMT +3, время: 11:12. |