Форум

Fankrai · #1 (**permalink**) 01.06.2020, 16:10

Здравствуйте. Я только познакомился с 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");
}

Если не сложно, то объясните что и как, поподробнее. Большое спасибо!

Error · #2 (**permalink**) 01.06.2020, 16:34

Здравствуйте. Предлагаю использовать делегирование событий:

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");
  }
});

laimas · #3 (**permalink**) 01.06.2020, 16:46

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", но можете как и было.

рони · #4 (**permalink**) 01.06.2020, 16:53

Fankrai,
либо циклом по всем кнопкам, либо делегирование.

рони · #5 (**permalink**) 01.06.2020, 16:55

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>

рони · #6 (**permalink**) 01.06.2020, 16:57

Сообщение от Error

() => {

if (event.target.classList.contains("btn"))

Firefox потеряет event, если его не указать!!!

Форум

Справочник

Discord чат

Курсы javascript