Проверка наличия класса
Есть разметка:
<div class="parent">
<div class="one"></div>
</div>
<div class="parent">
<div class="one"></div>
</div>
<span class=""></span>
при щелчке по элементу one в первом контейнере с классом parent добавляется еще один класс. Получается:
<div class="parent">
<div class="one active"></div>
</div>
<div class="parent">
<div class="one"></div>
</div>
<span class="disabled"></span>
Как задать условие, при котором при клике по one происходит проверка всех элементов на странице с этим классом, и если во всех элементах one есть класс active, то у span удаляется disabled? |
Янковиц,
А что не получается? Какие вопросы? |
Получается что-то вроде :
jQuery(document).ready(function($) {
jQuery('.one').click(function() {
jQuery(this).addClass('active');
if($('.parent').children().is('.active')){
alert('Выберите опции товара перед его добавлением в вашу корзину.');
} else {
jQuery('span').removeClass('disabled');
}
});
});
То-есть, классы добавляются, но у span не могу удалить disabled |
В условии ошибка.
|
Небольшое уточнение. Количество элементов с классом one может быть разное. И active должен быть только у одного элемента.
<div class="parent">
<div class="one"></div>
<div class="one"></div>
</div>
<div class="parent">
<div class="one"></div>
<div class="one"></div>
</div>
<span class=""></span>
|
Янковиц,
А когда у span появляется disabled ? |
Цитата:
|
Когда в каждом parent есть по одному one с классом active.
|
javascript every
Цитата:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript every</title>
</head>
<body>
<div class="parent">
<div class="one">one</div>
</div>
<div class="parent">
<div class="one">one</div>
</div>
<span class="disabled">span</span>
<script>
(function(span, hook, target) {
var sp = document.querySelector('.'+span);
document.addEventListener('click', function(e) {
if (e.target.classList.contains(target)) {
e.target.classList.add(hook);
var qf = [].every.call(document.querySelectorAll('.'+target), function(elem, indx) {
return elem.classList.contains(hook);
});
if (qf) sp.classList.remove(span);
}
});
})('disabled', 'active', 'one');
</script>
</body>
</html>
|
Элемент с классом activ должен быть в каждом parent
|
Спасибо. Очень близко... Попробовал на такой верстке:
<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. |
javascript some and every
Цитата:
<!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>
|
Круто! Прошу прощения, что еще раз беспокою. Еще одна проблема. В разметке есть еще одна сущность. Конечная верстка выглядит так:
<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. Спасибо заранее. |
Кроме того если в контейнере есть изображение <div class="one">img</div>, то скрипт не работает.
|
Цитата:
Цитата:
if (e.target.classList.contains(target) || e.target.closest('.'+target)) {
|
| Часовой пояс GMT +3, время: 14:17. |