Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.01.2018, 22:17
Аспирант
Отправить личное сообщение для Ramundo Посмотреть профиль Найти все сообщения от Ramundo
 
Регистрация: 07.03.2015
Сообщений: 47

Как сделать шкалу?
Допустим, у меня есть
<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, 22:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,684

звёздный рейтинг на 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>
Ответить с цитированием
  #3 (permalink)  
Старый 30.01.2018, 23:14
Аспирант
Отправить личное сообщение для Ramundo Посмотреть профиль Найти все сообщения от Ramundo
 
Регистрация: 07.03.2015
Сообщений: 47

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

только я забыл указать, что при клике на последнее подсвеченное значение не должны затухать все остальные подсвеченные, а только это самое последнее
Ответить с цитированием
  #4 (permalink)  
Старый 30.01.2018, 23:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,684

Ramundo,
а что делать если нажали не на последний?
Ответить с цитированием
  #5 (permalink)  
Старый 31.01.2018, 11:37
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Пардон
<!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>
Ответить с цитированием
  #6 (permalink)  
Старый 31.01.2018, 15:04
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Для разнообразия
<!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, 31.01.2018 в 17:29.
Ответить с цитированием
  #7 (permalink)  
Старый 31.01.2018, 15:23
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Dilettante_Pro,
заменить onchange на oninput.
Ответить с цитированием
  #8 (permalink)  
Старый 31.01.2018, 15:27
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

laimas,
Сообщение от laimas
заменить onchange на oninput.
Уже не зря писал

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

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

Последний раз редактировалось Dilettante_Pro, 31.01.2018 в 17:32.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 19:32
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 07:52
Как убрать hover? Либо как сделать стрелки статичными? krusty36 Элементы интерфейса 1 13.07.2011 08:20
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 08:06
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 18:14