Stack Overflow на русском Asked by WindCrack on November 22, 2021
Есть задача, у меня есть 4 или более блока одинаковых, в одном блоке span, в другом контент. При нажатии в первом блоке на span должен появиться контент во втором, при нажатии на третий, контент появляется в четвертом.
На данный момент получилось, что при нажатии на любой блок появляется весь контент:
function showSettings (){
document.querySelector('body').addEventListener('click', (e)=>{
let target = e.target;
const items = document.querySelectorAll('.a-content'),
plus = target.classList.contains('plus-on-settings');
if(plus){
$(items).toggleClass('hide');
}
})
}
showSettings();
Как реализовать, чтобы по клику на первый span открылся контент второго блока, а при клике на третий открылся контент четвертого блока?
Добавил несколько новых строчек в Ваш пример на CodePen, теперь все работает:
function showSettings() {
document.querySelector("body").addEventListener("click", (e) => {
const target = e.target
const plus = target.classList.contains("plus-on-settings")
if (plus) {
const details = target.closest(".a").nextElementSibling.querySelector(".a-content")
details.classList.toggle("hide")
}
})
}
showSettings().hide {
display: none;
}
.a {
margin-block-end: 15px;
}
span {
border: solid 1px red;
padding: 5px;
border-radius: 5px;
}<div class="content">
<div class="a">
<span class="plus-on-settings">+</span>
</div>
<div class="a">
<div class="a-content hide">
Далеко-далеко за словесными горами в стране.
</div>
</div>
<div class="a">
<span class="plus-on-settings">+</span>
</div>
<div class="a">
<div class="a-content hide">
Далеко-далеко за словесными горами в стране.
</div>
</div>
<div class="a">
<span class="plus-on-settings">+</span>
</div>
<div class="a">
<div class="a-content hide">
Далеко-далеко за словесными горами в стране.
</div>
</div>
<div class="a">
<span class="plus-on-settings">+</span>
</div>
<div class="a">
<div class="a-content hide">
Далеко-далеко за словесными горами в стране.
</div>
</div>
</div>Answered by Vasily on November 22, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP