11.03.2022, 10:26
|
|
Новичок на форуме
|
|
Регистрация: 11.03.2022
Сообщений: 5
|
|
|
Звёздный рейтинг⭐⭐⭐⭐⭐
Всем добрый день!
Такая задача: нужно сделать звездный рейтинг, выводящий текст.
Что готово: форма, сами звёзды, текст, меняющийся в зависимости от активной и "наведенной" звезд;
Что не так: Если пользователь ткнул звезду, то текст "запоминает" только эту звезду и не меняется, если просто водить курсором по всем звездам;
С чем нужна помощь: нужно сделать так, чтобы после того, как пользователь ткнул по какой-либо звезде, текст менялся при наведении на другие звезды, но если потом отвести курсор от звезд, должна отображаться та звезда, по которой был клик.
https://codepen.io/bromble/pen/oNpvZPa
Последний раз редактировалось bromble, 11.03.2022 в 17:04.
|
|
11.03.2022, 12:02
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,118
|
|
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('Плохо, напишу рекомендацию!');
});
|
|
11.03.2022, 13:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,118
|
|
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('Отлично!');
});
|
|
11.03.2022, 13:04
|
|
Новичок на форуме
|
|
Регистрация: 11.03.2022
Сообщений: 5
|
|
|
Спасибо!
|
|
11.03.2022, 16:37
|
|
Новичок на форуме
|
|
Регистрация: 11.03.2022
Сообщений: 5
|
|
рони, а как можно допилить этот код так, чтобы надписи менялись и после клика, но нажатая надпись запоминалась браузером как и звезда?
|
|
11.03.2022, 18:53
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,118
|
|
|
звёздый рейтинг 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>
|
|
11.03.2022, 19:54
|
|
Новичок на форуме
|
|
Регистрация: 11.03.2022
Сообщений: 5
|
|
|
ого, а в какую переменную тут идет выбранное значение?
|
|
11.03.2022, 20:00
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,118
|
|
|
Сообщение от bromble
|
|
а в какую переменную тут идет выбранное значение?
|
строка 159 вывод выбранного значения(rating) в строку 35(input) |
|
|
|
