Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.06.2020, 16:10
Новичок на форуме
Отправить личное сообщение для Fankrai Посмотреть профиль Найти все сообщения от Fankrai
 
Регистрация: 01.06.2020
Сообщений: 2

Несколько кнопок скрыть/показать в одном 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");
}

Если не сложно, то объясните что и как, поподробнее. Большое спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 01.06.2020, 16:34
Аватар для Error
Интересующийся
Отправить личное сообщение для Error Посмотреть профиль Найти все сообщения от Error
 
Регистрация: 30.04.2020
Сообщений: 13

Здравствуйте. Предлагаю использовать делегирование событий:
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");
  }
});
Ответить с цитированием
  #3 (permalink)  
Старый 01.06.2020, 16:46
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,438

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,892

Fankrai,
либо циклом по всем кнопкам, либо делегирование.
Ответить с цитированием
  #5 (permalink)  
Старый 01.06.2020, 16:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,892

делегирование
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,892

Сообщение от Error
() => {

  if (event.target.classList.contains("btn"))
Firefox потеряет event, если его не указать!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Соединить несколько файлов JS в один maguaguru Общие вопросы Javascript 17 01.12.2011 15:33
назначить событие в js файле toglyatty.ru Общие вопросы Javascript 2 10.02.2011 08:29
запомнить переменную js в одном файле и использовать в другом. как? skalka Общие вопросы Javascript 2 28.09.2010 07:19
Передать несколько значений из JS на сервер, методом POST балерун Общие вопросы Javascript 1 02.03.2010 13:36
Блок переключения меню на JS, два скрипта в одном файле Dizeloid Элементы интерфейса 0 30.07.2009 11:03