Нужна помощь в реализации системы оценки
Всем добрый день!
Пытаюсь реализовать такую тему: Изначально есть 5 серых звезд, при наведении курсора на какую-либо звезду она и все звезды слева от нее закрашиваются желтым, а в блоке вместо приглашения оценить появляется статус, характеризующий закрашенное количество звезд. Далее при клике с 1й по 3ю звезду появляется block2, а при клике на 4ю или 5ю - block3 Пока есть вот такой код: http://jsbin.com/waqibihoha/1/edit?html,css,js,output Собственно вопрос: Как к каждой звезде добавить действие, если они у меня реализованы бэкграундом? Или надо было делать звезды через список? |
Можно во время клика вычислять смещение курсора от начала блока, но правильнее, имхо, списком сделать.
|
Рейтинг звёздочками
Ranetka,
так?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<style>
body{
padding: 0;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none ;
}
:focus {
outline: none;
}
.container {
position:relative;
color: #FFFFFF;
width: 600px;
height: 400px;
overflow: hidden;
background-image: url('img/bg.png');
background-repeat: no-repeat;
}
div {
font-family: Tahoma, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
text-align: center;
}
p {margin: 0;}
.headline {
color: #BBBDDD;
font-size: 28px;
margin-top: 25px;
}
#productRate {
background: url(https://www.benefity.cz/images/ikony/ico_repeat.png) repeat-x;
width: 390px;
height: 82px;
position: relative;
margin: 20px auto;
overflow: hidden;
}
#productRate div {
background: url(https://www.benefity.cz/images/ikony/ico_repeat.png) repeat-x left bottom;
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
cursor: pointer;
}
#productRate span {
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: url(https://www.benefity.cz/images/ikony/ico_repeat.png) left bottom;
width: 0;
cursor: pointer;
}
.block {
color: #FFD482;
font-size: 18px;
background: #000;
background-repeat: no-repeat;
width: 388px;
height: 72px;
line-height: 70px;
margin: 0 auto;
}
.block2, .block3 { display: none;}
</style>
</head>
<body scroll="no">
<div class="container">
<p class="headline">Оцените нас!</p>
<div id="productRate">
<div></div>
</div>
<p class="block">Нажмите, что бы оценить</p>
<p class="block block2">Обратитесь в службу поддержки</p>
<p class="block block3">Спасибо!</p>
</div>
<script>
jQuery(document).ready(function() {
jQuery("#productRate").hover(function() {
jQuery(this).append("<span></span>")
}, function() {
jQuery(this).find("span").remove();
jQuery(".headline").text("Оцените нас!")
});
var rating;
jQuery("#productRate").click(function() {
var bl = rating > 3 ? ".block3" : ".block2";
jQuery("#productRate").off("mouseenter mouseleave mousemove click");
jQuery(bl).fadeIn()
});
jQuery("#productRate").mousemove(function(e) {
var left = e.pageX - jQuery(this).offset().left;
rating = Math.round(left * 5 / jQuery(this).width());
jQuery(".headline").text(rating)
jQuery(this).find("span").eq(0).css("width", rating * 82 + "px");
})
});
</script>
</body>
</html>
|
рони,
Предполагаю, что на планшете будут сложности с этим кодом |
На планшетах не предполагается показывать это окно, так что тут всё ок.
Только вот не понятно, как вместо цифр при наведении выводить текст, причем на каждую звезду разный. |
Ranetka,
:-? строка 128
jQuery(".headline").text(["a","s","d","f","g","h"][rating])
|
| Часовой пояс GMT +3, время: 01:18. |