Несколько кнопок скрыть/показать в одном js файле
Здравствуйте. Я только познакомился с js, т.к занимаюсь версткой. У меня есть 6 кнопок READ MORE на сайте.
Я создал файлик main.js и написал скрипт для первой кнопки. Всё отлично, текст скрывается и показывается, но когда я по такому же принципу пишу для других кнопок - открывается та первая! Создал новый файл js и написал для другой кнопки - сработало. Предполагаю, что я что-то не понимаю и надо делать как-то по-другому. Не могли бы вы мне подсказать, где я ошибся и как написать повторение, но для других кнопок, что бы я не создавал 6 отдельных js файлов? <p class="section-heading1--text"> Lorem ipsum dolor mero moleamet, soluta euism od isea, hiea unereusams ullu tpamco detore aer rper quo, utam signiferuuue uo. Brute inani in prom in <span class="content hidden">Lorem ipsum dolor mero moleamet, soluta euism od isea, hiea unereusams ullu tpamco detore aer rper quo, utam signiferuuue uo. Brute inani in prom in</span></p> <button class="btn" type="button">READ MORE</button> [CSS]hidden { display: none; }
const btn = document.querySelector(".btn");
const content = document.querySelector(".content");
btn.addEventListener("click", btnClick);
function btnClick() {
console.log(content.classList);
if (content.classList.contains("hidden")) {
btn.textContent = "HIDE";
} else {
btn.textContent = "READ MORE";
}
content.classList.toggle("hidden");
}
Если не сложно, то объясните что и как, поподробнее. Большое спасибо! |
Здравствуйте. Предлагаю использовать делегирование событий:
document.body.addEventListener("click", () => {
if (event.target.classList.contains("btn")) {
const content = event.target.previousElementSibling.querySelector(
".content"
);
if (content.classList.contains("hidden")) {
event.target.textContent = "HIDE";
} else {
event.target.textContent = "READ MORE";
}
content.classList.toggle("hidden");
}
});
|
const content = document.querySelectorAll(".content");
const btn = [...document.querySelectorAll(".btn")];
btn.forEach((e) => e.addEventListener('click', btnClick))
function btnClick() {
content[btn.indexOf(this)].classList.toggle("hidden")
}
Текст можно определить как массив в data, в котором выбирать по значению наличия класса "hidden", но можете как и было. |
Fankrai,
либо циклом по всем кнопкам, либо делегирование. |
делегирование
Fankrai,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.section-heading1--text .content{
display: none;
}
.section-heading1--text.more .content{
display: initial;
}
.section-heading1--text + .btn:after{
content: 'READ MORE'
}
.section-heading1--text.more + .btn:after{
content: 'HIDE'
}
</style>
<script>
document.addEventListener('click', ({target}) => {
if(target.closest('.btn')){
const prev = target.previousElementSibling;
prev.classList.toggle('more')
}
});
</script>
</head>
<body>
<p class="section-heading1--text">
Lorem ipsum dolor mero moleamet,
soluta euism od isea, hiea unereusams
ullu tpamco detore aer rper quo, utam
signiferuuue uo. Brute inani in prom in
<span class="content">Lorem ipsum dolor mero moleamet,
soluta euism od isea, hiea unereusams
ullu tpamco detore aer rper quo, utam
signiferuuue uo. Brute inani in prom in</span></p>
<button class="btn" type="button"></button>
<p class="section-heading1--text">
Lorem ipsum dolor mero moleamet,
soluta euism od isea, hiea unereusams
ullu tpamco detore aer rper quo, utam
signiferuuue uo. Brute inani in prom in
<span class="content">Lorem ipsum dolor mero moleamet,
soluta euism od isea, hiea unereusams
ullu tpamco detore aer rper quo, utam
signiferuuue uo. Brute inani in prom in</span></p>
<button class="btn" type="button"></button>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 10:07. |