Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.06.2019, 15:34
Новичок на форуме
Отправить личное сообщение для ArtiOnMoon Посмотреть профиль Найти все сообщения от ArtiOnMoon
 
Регистрация: 02.04.2019
Сообщений: 8

Несколько collapse элементов на странице
Условно. Есть на странице несколько таких элементов

<button class="bab">Кнопка</button>
<div class="box" style="display: none"> Содержимое </div>

<button class="bab">Кнопка</button>
<div class="box" style="display: none"> Содержимое 2</div>


И есть java скрипт который должен скрывать и показывать элемент. Однако он не работает. Помогите найти ошибку.
<script>
let coll = document.getElementsByClassName("bab");
	for (i = 0; i < coll.length; i++;) {
coll[i].addEventListener('click', function() {
let box = this.nextElementSibling;
if (box.style.display == "none"){
box.style.display = "block";
	}	else{
box.style.display = "none";
}
})
}
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 03.06.2019, 15:56
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Вы написали лишнюю точку с запятой!
<button class="bab">Кнопка</button>
<div class="box" style="display: none"> Содержимое </div>

<button class="bab">Кнопка</button>
<div class="box" style="display: none"> Содержимое 2</div>

<script>

let coll = document.getElementsByClassName("bab");
for (i = 0; i < coll.length; i++) {
	coll[i].addEventListener("click", function() {
		let box = this.nextElementSibling;
		if (box.style.display == "none") {
			box.style.display = "block";
		} else {
			box.style.display = "none";
		}
	});
}

</script>


Ваше решение не учитывает то, что могут быть удалены или добавлены элементы!

Вот учитывает...
<button class="bab">Кнопка</button>
<div class="box" hidden> Содержимое </div>

<button class="bab">Кнопка</button>
<div class="box" hidden> Содержимое 2</div>

<script>

addEventListener("click", function(event) {
	if (!event.target.matches(".bab")) return;

	const box = event.target.nextElementSibling;
	box.hidden ^= true;
});

</script>


Также можно использовать элемент summary...
<details>
	<summary class="bab">Кнопка</summary>
	<div class="box"> Содержимое </div>
</details>

<details>
	<summary class="bab">Кнопка</summary>
	<div class="box"> Содержимое 02</div>
</details>
Ответить с цитированием
  #3 (permalink)  
Старый 03.06.2019, 16:16
Новичок на форуме
Отправить личное сообщение для ArtiOnMoon Посмотреть профиль Найти все сообщения от ArtiOnMoon
 
Регистрация: 02.04.2019
Сообщений: 8

Огромное спасибо. Ваше решение действительно лучшее
Ответить с цитированием
  #4 (permalink)  
Старый 05.06.2019, 20:47
Новичок на форуме
Отправить личное сообщение для ArtiOnMoon Посмотреть профиль Найти все сообщения от ArtiOnMoon
 
Регистрация: 02.04.2019
Сообщений: 8

Добрый вечер использую предложенный вами вариант.
<button class="bab">Кнопка</button>
<div class="box" hidden> Содержимое </div>

<button class="bab">Кнопка</button>
<div class="box" hidden> Содержимое 2</div>

<script>

addEventListener("click", function(event) {
	if (!event.target.matches(".bab")) return;

	const box = event.target.nextElementSibling;
	box.hidden ^= true;
});

</script>


И столкнулся с следующей проблемой. Изредка кнопка не работает. Наблюдается корреляция с количеством кнопок. Примерно это выглядит вот так - https://www.youtube.com/watch?v=zbqH...ature=youtu.be

В теме где мало кнопок все хорошо, где много они уже не работают.
Никаких ошибок в консоле на замечено, однако hidden упорно отказывается убираться, в чем может быть причина?

Последний раз редактировалось ArtiOnMoon, 05.06.2019 в 20:49.
Ответить с цитированием
  #5 (permalink)  
Старый 05.06.2019, 21:35
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от ArtiOnMoon
И столкнулся с следующей проблемой. Изредка кнопка не работает. Наблюдается корреляция с количеством кнопок. Примерно это выглядит вот так
Я заметил, что у вас (в видео подглядел) мой скрипт обернут в DOMContentLoaded, это не нужно. Также проследите, чтобы только один раз этот скрипт был вставлен на страницу. (Если у вас генерируется шаблон на сервере, то вы могли это упустить) Элементов может быть сколько угодно, но скрипт должен быть только один. Чтобы не путаться вынесите этот скрипт в <head>

Скрипт должен быть только один на странице! (лучше в <head>)
<script>

addEventListener("click", function(event) {
	if (!event.target.matches(".bab")) return;

	const box = event.target.nextElementSibling;
	box.hidden ^= true;
});

</script>


Элементов, которыми он будет управлять может быть много (идут где-то в <body>)
<button class="bab">Кнопка</button>
<div class="box" hidden> Содержимое </div>

<button class="bab">Кнопка</button>
<div class="box" hidden> Содержимое 2</div>


Если у вас скрипт добавлен два раза, то при нажатии на кнопку первый откроет содержимое (поскольку оно было скрыто), а второй его тут же закроет (поскольку оно на этот момент было открыто). В итоге это будет выглядеть как будто не открылось.

Последний раз редактировалось Malleys, 05.06.2019 в 21:51.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как выделить несколько слов на web странице, аналогично ctrl в word njuri Общие вопросы Javascript 1 04.09.2014 18:56
Создать несколько одинаковых элементов dulingleb Общие вопросы Javascript 3 29.06.2014 21:17
Несколько модальных окон на одной странице pleymo jQuery 2 04.06.2014 09:24
Несколько таблиц с плавающей шапкой на странице Hurray Элементы интерфейса 28 06.04.2014 10:22
Internet Explorer запретил выполнение сценариев и элементов ActiveX на этой странице Nailya Internet Explorer 3 02.12.2013 12:30