Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проверка наличия класса (https://javascript.ru/forum/dom-window/71111-proverka-nalichiya-klassa.html)

Янковиц 26.10.2017 18:35

Спасибо. Очень близко... Попробовал на такой верстке:
<div class="parent">
		<div class="one">one</div>
		<div class="one">two</div>
	</div>
	<div class="parent">
		<div class="one">one</div>
		<div class="one">two</div>
	</div>
	<span class="disabled">span</span>

disabled убирается если во всех элементах one есть класс active. А нужно, чтобы activ был только в одном из элементов one? в каждом parent.

Rasy 26.10.2017 18:51

javascript some and every
 
Цитата:

Сообщение от Янковиц
А нужно, чтобы activ был только в одном из элементов one? в каждом parent.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>javascript some and every</title>
</head>
<body>

	<div class="parent">
		<div class="one">one</div>
		<div class="one">one</div>
	</div>
	<div class="parent">
		<div class="one">one</div>
		<div class="one">one</div>
	</div>
	<span class="disabled">span</span>

	<script>
		(function(span, hook, target, parent) {
			var sp = document.querySelector('.'+span);
			var tg = document.querySelectorAll('.'+parent);
			document.addEventListener('click', function(e) {
				if (e.target.classList.contains(target)) {
					e.target.classList.toggle(hook);
					var qf = [].every.call(tg, function(elem) {
						return [].some.call(elem.children, function(el) {
							return el.classList.contains(hook);
						});
					});
					if (qf) sp.classList.remove(span);
				}
			});
		})('disabled', 'active', 'one', 'parent');
	</script>

</body>
</html>

Янковиц 26.10.2017 19:41

Круто! Прошу прощения, что еще раз беспокою. Еще одна проблема. В разметке есть еще одна сущность. Конечная верстка выглядит так:
<div class="parent">
		<div class="one">one</div>
		<div class="one">one</div>
	</div>
	<div class="parent">
		<div class="one">one</div>
		<div class="one">one</div>
	</div>
	<div class="parent">
		<input type="checkbox" id="spoiler">
		<label for="spoiler">Выберите дату</label>
	</div>
	<span class="disabled">span</span>

Для удаления disabled нужно произвести проверку, есть ли в parent label, и если есть, то label должен тоже иметь класс active, если label отсутствует, значит он не влияет на span. Спасибо заранее.

Янковиц 26.10.2017 20:16

Кроме того если в контейнере есть изображение <div class="one">img</div>, то скрипт не работает.

Rasy 26.10.2017 22:10

Цитата:

Сообщение от Янковиц
Для удаления disabled нужно произвести проверку, есть ли в parent label, и если есть, то label должен тоже иметь класс active, если label отсутствует, значит он не влияет на span. Спасибо заранее.

Проще всего label добавить класс - one
Цитата:

Сообщение от Янковиц
Кроме того если в контейнере есть изображение <div class="one">img</div>, то скрипт не работает.

24 строка
if (e.target.classList.contains(target) || e.target.closest('.'+target)) {


Часовой пояс GMT +3, время: 18:41.