Как сделать шкалу?
Допустим, у меня есть
<style type="text/css">
.bar{
border: solid yellow;
display:inline-block;
cursor: pointer;
}
.selected {
background: SteelBlue;
}
.cell{
border: solid blue 2px;
display:inline-block;
width:14px;
height:12px;
background: PaleTurquoise;
}
</style>
<div class = "bar">
<div class = "cell" data-val = "1"></div>
<div class = "cell" data-val = "2"></div>
<div class = "cell" data-val = "3"></div>
<div class = "cell" data-val = "4"></div>
<div class = "cell" data-val = "5"></div>
<div class = "cell" data-val = "6"></div>
</div>
bar - это горизонтальный блок, контейнер шкалы, а cell'ы - значения шкалы Помогите пожалуйста оживить все енто дело так, чтобы: - при клике на один cell , он и все cell'ы до него подсвечивались, т.е. приобретали класс selected - при клике на посвеченный cell, он затухал (selected пропадал), В общем, типичное поведение шкалы:) . Только просьба , без Jquery и попроще , если можно (Рони :D ) |
звёздный рейтинг на js
Ramundo,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".bar"), function(el) {
var cell = el.querySelector(".cell");
el.addEventListener("click", function(event) {
var elem = event.target,
cls = elem.classList;
if (cls.contains("cell")) {
elem == cell ? (cell.classList.toggle("selected"), el.classList.toggle("act")) :
(cell.classList.remove("selected"), el.classList.add("act"),
elem.classList.add("selected"), cell = elem);
}
});
});
});
</script>
</head>
<body>
<style type="text/css">
.bar{
border: solid yellow;
display:inline-block;
cursor: pointer;
}
.bar.act .cell {
background-color: SteelBlue;
}
.bar.act .cell.selected ~ .cell{
background-color: PaleTurquoise;
}
.cell{
border: solid blue 2px;
display:inline-block;
width:14px;
height:12px;
background-color: PaleTurquoise;
}
</style>
<div class = "bar">
<div class = "cell" data-val = "1"></div>
<div class = "cell" data-val = "2"></div>
<div class = "cell" data-val = "3"></div>
<div class = "cell" data-val = "4"></div>
<div class = "cell" data-val = "5"></div>
<div class = "cell" data-val = "6"></div>
</div>
<div class = "bar">
<div class = "cell" data-val = "1"></div>
<div class = "cell" data-val = "2"></div>
<div class = "cell" data-val = "3"></div>
<div class = "cell" data-val = "4"></div>
<div class = "cell" data-val = "5"></div>
<div class = "cell" data-val = "6"></div>
</div>
</body>
</html>
|
Спасибо огромное! Все супер, ты мастер!
только я забыл указать, что при клике на последнее подсвеченное значение не должны затухать все остальные подсвеченные, а только это самое последнее |
Ramundo,
а что делать если нажали не на последний? |
Пардон
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.bar{
border: solid yellow;
display:inline-block;
cursor: pointer;
}
.cell{
border: solid blue 2px;
display:inline-block;
width:14px;
height:12px;
background: PaleTurquoise;
}
.selected {
background: SteelBlue;
}
</style>
</head>
<body>
<div class = "bar">
<div class = "cell " data-val = "1"></div>
<div class = "cell" data-val = "2"></div>
<div class = "cell" data-val = "3"></div>
<div class = "cell" data-val = "4"></div>
<div class = "cell" data-val = "5"></div>
<div class = "cell" data-val = "6"></div>
</div>
<script>
var cell = document.querySelectorAll('.cell'), n = 0;
cell.forEach(function(el, s){
el.onclick = function(e) {
cell.forEach(function(el, i) {
if(i<s) el.classList.add('selected');
if(i>s) el.classList.remove('selected');
if(i==s && n==s|| i==s && !el.matches('.selected')) el.classList.toggle('selected');
});
n=s;
};
});
</script>
</body>
</html>
|
Для разнообразия
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.bar{
border: solid yellow;
display:inline-block;
cursor: pointer;
}
.cell{
border: solid blue 2px;
display:inline-block;
width:14px;
height:12px;
background: PaleTurquoise;
}
.selected {
background: SteelBlue;
}
</style>
</head>
<body>
<div class = "bar">
<div class = "cell " data-val = "1"></div>
<div class = "cell" data-val = "2"></div>
<div class = "cell" data-val = "3"></div>
<div class = "cell" data-val = "4"></div>
<div class = "cell" data-val = "5"></div>
<div class = "cell" data-val = "6"></div>
</div><br>
<input type="range" min = "-1" max = "5" value = "-1">
<script>
var evnt = ((navigator.userAgent.search(/MSIE/) > -1) ||(navigator.userAgent.search(/Trident/) > -1)) ? "change":"input";
var cell = document.querySelectorAll('.cell'),
set = document.querySelector('[type="range"') ;
set.addEventListener(evnt, function() {
var s = +this.value;
[].forEach.call(cell, function(el, i) {
if(i <= s) el.classList.add('selected');
if(i > s) el.classList.remove('selected');
});
});
</script>
</body>
</html>
|
Dilettante_Pro,
заменить onchange на oninput. |
laimas,
Цитата:
Заменил. Стало веселее.:) НО: в ИЕ onchange работает, как в Хроме oninput, а oninput не хочет работать. Сделал кроссбраузерно. Проверил в ИЕ11, Хроме, ФФ, Опера |
| Часовой пояс GMT +3, время: 12:48. |