Форум

Ramundo · #1 (**permalink**) 30.01.2018, 23:17

Допустим, у меня есть

<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 и попроще , если можно (Рони

)

рони · #2 (**permalink**) 30.01.2018, 23:44

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 · #3 (**permalink**) 31.01.2018, 00:14

Спасибо огромное! Все супер, ты мастер!

только я забыл указать, что при клике на последнее подсвеченное значение не должны затухать все остальные подсвеченные, а только это самое последнее

рони · #4 (**permalink**) 31.01.2018, 00:18

Ramundo,
а что делать если нажали не на последний?

j0hnik · #5 (**permalink**) 31.01.2018, 12:37

Пардон

<!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>

Dilettante_Pro · #6 (**permalink**) 31.01.2018, 16:04

Для разнообразия

<!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>

laimas · #7 (**permalink**) 31.01.2018, 16:23

Dilettante_Pro,
заменить onchange на oninput.

Dilettante_Pro · #8 (**permalink**) 31.01.2018, 16:27

laimas,

Сообщение от laimas

заменить onchange на oninput.

Уже не зря писал

Заменил. Стало веселее.

НО: в ИЕ onchange работает, как в Хроме oninput, а oninput не хочет работать.
Сделал кроссбраузерно. Проверил в ИЕ11, Хроме, ФФ, Опера

Форум

Справочник

Discord чат

Курсы javascript