15.12.2017, 14:44
|
|
Интересующийся
|
|
Регистрация: 14.12.2017
Сообщений: 17
|
|
|
О. у нас кнопки с одинаковыми классами, а если их сделать разными классами? например redBtn,yellowBtn, greenBtn, blueBtn и actBtn тогда что в коде нужно сделать? Спасибо!
Последний раз редактировалось 3dartmax, 15.12.2017 в 16:34.
|
|
15.12.2017, 15:50
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
|
|
15.12.2017, 16:36
|
|
Интересующийся
|
|
Регистрация: 14.12.2017
Сообщений: 17
|
|
window.addEventListener("DOMContentLoaded", function() {
var content = document.querySelector(".slider");
content.addEventListener("click", function(event) {
var target = event.target;
if (target = target.closest(".btn")) {
event.preventDefault();
var a = content.querySelectorAll("#redBtn, #yellowBtn, #greenBtn, #blueBtn");
var img = content.querySelectorAll(".preview");
var selected = [].indexOf.call(a, target);
[].forEach.call(a, function(el, i) {
(i == selected) ? (el.classList.add("actBtn"), img[i].classList.add("act")):
(el.classList.remove("actBtn"), img[i].classList.remove("act"))
})
}
})
});
Верно?
Последний раз редактировалось 3dartmax, 15.12.2017 в 16:41.
|
|
15.12.2017, 17:03
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от 3dartmax
|
|
Верно?
|
а проверить? 5-ю строку тоже нужно изменить, если вы убрали класс |
|
15.12.2017, 17:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
3dartmax,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
box-sizing: border-box;
}
.slider {
background-color: rgba(229, 255, 248, 0.28);
width: 500px;
height: 500px;
align-content: center;
display: flex;
justify-content: space-around;
padding: 15px;
border: 1px solid black;
}
.preview {
width: 300px;
height: 400px;
position: absolute;
padding: 10px;
border: 1px solid black;
text-align: center;
color: white;
z-index: 1;
opacity: .3;
transition: all .8s ease-in-out;
}
.contrl {
width: 100px;
height: 400px;
border: 1px solid rgba(70, 243, 19, 0.58);
margin-left: 350px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btn.red, .preview.red {
background-color: red;
}
.btn.yellow, .preview.yellow {
background-color: #fffb1d;
}
.btn.green, .preview.green {
background-color: #5dc35e;
}
.btn.blue, .preview.blue {
background-color: #655bc3;
}
.btn{
width: 75px;
height: 75px;
border: 1px solid black;
margin: 10px;
color: white;
transition: all .3s ease-in-out;
}
.preview.act{
z-index: 10;
opacity: 1;
}
.btn.actBtn {
border-radius: 12px;
border-width: thick;
}
:focus{
outline:0;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var content = document.querySelector(".slider");
var a = content.querySelectorAll("#redBtn, #yellowBtn, #greenBtn, #blueBtn");
var img = content.querySelectorAll(".preview");
content.addEventListener("click", function(event) {
var target = event.target;
var selected = [].indexOf.call(a, target);
if (selected !== -1) {
event.preventDefault();
[].forEach.call(a, function(el, i) {
(i == selected) ? (el.classList.add("actBtn"), img[i].classList.add("act")):
(el.classList.remove("actBtn"), img[i].classList.remove("act"))
})
}
})
});
</script>
<body>
<div class="slider">
<div class="preview red act">Red</div>
<div class="preview yellow">Yellow</div>
<div class="preview green">Green</div>
<div class="preview blue">Blue</div>
<div class="contrl">
<button class="btn red actBtn" id="redBtn">Red</button>
<button class="btn yellow" id="yellowBtn">Yellow</button>
<button class="btn green" id="greenBtn">Green</button>
<button class="btn blue" id="blueBtn">Blue</button>
</div>
</div>
</body>
</html>
|
|
15.12.2017, 22:55
|
|
Интересующийся
|
|
Регистрация: 14.12.2017
Сообщений: 17
|
|
|
Понял, а без массива возможно реализовать также?
|
|
15.12.2017, 23:39
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от 3dartmax
|
|
без массива
|
?
не понимаю, без "делегирования" можно, назначить каждой кнопке клик. |
|
16.12.2017, 04:29
|
|
Интересующийся
|
|
Регистрация: 14.12.2017
Сообщений: 17
|
|
|
в самой функции или навесить клик на кнопки? подскажите плз...
|
|
16.12.2017, 09:29
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
3dartmax,
я пас, мне сложно понять ваши формулировки.
|
|
17.12.2017, 02:31
|
|
Интересующийся
|
|
Регистрация: 14.12.2017
Сообщений: 17
|
|
|
я имею ввиду onclick на самой кнопке или в функции чтото поменять?
|
|
|
|
