Сделать подсветку элементов [Архив форума]

Янковиц

19.03.2018, 11:10

Есть ряд блоков:

<div class="parent">
<div class="show">1</div>
<div class="show">2</div>
<div class="show">3</div>
<div class="show">4</div>
</div>
<div class="parent">
<div class="show">5</div>
<div class="show">6</div>
<div class="show">7</div>
<div class="show">8</div>
</div>
При клике по элементу, закрашиваю синим цветом. Затем при перемещении курсора до или после кликнутного элемента, все остальные закрашивались красным до элемента над которым курсор. Короче, как в календарике: http://longbill.github.io/jquery-date-range-picker/
Прошу помощи знатоков

Янковиц

19.03.2018, 11:15

Нашел похожее:
http://jsfiddle.net/kkLgs1yv/2/
Только как реализовать с моей версткой?

рони

19.03.2018, 12:39

Янковиц,
https://javascript.ru/forum/dom-window/61005-vydelit-interval-ehlementov-ot-do-b-dvumya-klikami-2.html#post405718

Янковиц

19.03.2018, 12:52

Спасибо!

Янковиц

19.03.2018, 14:18

Рони, подскажи. Как на javascript обрабатывать динамически созданные элементы? В теме по ссылке такой код:
a.addEventListener("click", function() {
if (void 0 === b) b = c, d("mark"), d("blue", b, b);
else {
var a = Math.min(c, b),
e = Math.max(c, b);
b = void 0;
d("blue");
d("mark", a, e)
}
})
Как он будет выглядеть для динамически созданных элементов?

j0hnik

19.03.2018, 14:35

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

рони

19.03.2018, 15:47

Янковиц,

<!DOCTYPE HTML>

<html>

<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
display: flex;
margin: 0;
height: 100vh;
background: #56bddc;
}
.box {
display: flex;
margin: auto;
box-shadow: 0 0 5px hsla(0, 0%, 0%, .25);
}
.el {
width: 60px;
line-height: 60px;
font-family: consolas;
font-size: 30px;
text-align: center;
cursor: pointer;
background: #fff;
-webkit-user-select: none;
user-select: none;
-moz-user-select: none;
}
.el:hover { background: #fece9a; }
.mark { background: #fece9a; }

.blue, .blue:hover{
background: #0000FF;
}
</style>

<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".box"), function(item) {
var temp;
item.addEventListener("click", function(event) {
var el = item.querySelectorAll(".el");
target = event.target;
var index = [].indexOf.call(el, target);
if (index !== -1) {
[].forEach.call(el, function(el) {
el.classList.remove("blue");
});
if (temp == index) {
temp = void 0;
} else {
if (void 0 === temp) {
target.classList.add("blue");
temp = index;
} else {
var min = Math.min(index, temp), max = Math.max(index, temp);
el = [].slice.call(el, min, ++max);
[].forEach.call(el, function(el) {
el.classList.add("blue");
});
temp = void 0;
}
}
}
});
item.addEventListener("mouseover", function(event) {
var el = item.querySelectorAll(".el");
target = event.target;
var index = [].indexOf.call(el, target);
if (index !== -1) {
if (void 0 !== temp) {
[].forEach.call(el, function(el) {
el.classList.remove("blue");
});
var min = Math.min(index, temp), max = Math.max(index, temp);
el = [].slice.call(el, min, ++max);
[].forEach.call(el, function(el) {
el.classList.add("blue");
});
}
}
});
item.addEventListener("mouseleave", function(event) {
var el = item.querySelectorAll(".el");
if (temp) {
[].forEach.call(el, function(el) {
el.classList.remove("blue");
});
el[temp].classList.add("blue");
temp = void 0;
}
});
});
});
</script>
</head>

<body>
<div class='box'>
<div class='el'>1</div>
<div class='el'>2</div>
<div class='el'>3</div>
<div class='el'>4</div>
<div class='el'>5</div>
<div class='el'>6</div>
<div class='el'>7</div>
<div class='el'>8</div>
<div class='el'>9</div>
<div class='el'>X</div>
</div>

</body>

</html>

laimas

19.03.2018, 17:59

Нашел похожее:
http://jsfiddle.net/kkLgs1yv/2/
Только как реализовать с моей версткой?

Можно так:

<style>
.show {
cursor: pointer;
}

.mark {
background-color: #00f;
}

.light {
background-color: #ddd;
}
</style>
<div>
<div class="show">111111111</div>
<div class="show">222222222</div>
<div class="show">333333333</div>
<div class="show">444444444</div>
<div class="show">555555555</div>
<div class="show">666666666</div>
<div class="show">777777777</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
var el = $('div.show').click(function() {
el.removeClass('light').not($(this).toggleClass('m ark')).removeClass('mark');
}).mouseenter(function() {
var a = $(this),
b = a.index(),
c = a.siblings('.mark').index();

el.removeClass('light');

if(~c) (b < c ? el.slice(b, c) : el.slice(c+1, b+1)).addClass('light')

}).mouseleave(function() {
el.removeClass('light')
})
});
</script>