Как выбрать элемент с несколькими классами?

Question

[Дмитрий]

Прошу помощи, есть несколько элементов вида

<div class="a" ... >
    <div class="b" ... >
    </div>
</div>
<div class="a" ... >
    <div class="b c" ... >
    </div>
</div>

Задача состоит в том, чтобы по клику по элементу <div class="b c" ... ></div> (и только по нему) запустить jQuery функцию.
Для вызова функции используется конструкция $('.b').click(function() { ... });, в таком виде все работает, функция вызывается. Но нужно ее вызывать для элемента (b c), а не (b). Проблема в том, что любые конструкции вида $('.b.c'), $('.b .c') $('.a .b.c') напрочь не дают результата, функция не вызывается ни в одном варианте кроме $('.b'). Как выбрать нужный элемент?

Answer 1

[Павел Корнилов]

$('.b.с')

Это правильное обращение к мультиклассу.

Comments

[Дмитрий]

Павел Корнилов, вот и я так думаю, но в таком виде функция не вызывается ни на одном элементе, ни на (b), ни на (b c)

[DanKud]

Дмитрий, все должно работать при таком селекторе. Значит где-то в другом месте у вас проблема.

[Павел Корнилов]

Дмитрий, немного оптимизировал код от Тимур Турсунбаев - https://codepen.io/KorniloFF/pen/xMLpbg?editors=1010

[Павел Корнилов]

Дмитрий, или так, чтобы иметь возможность закрыть открытый спойлер - https://codepen.io/KorniloFF/pen/mvMppQ?editors=1010

[Дмитрий]

Павел Корнилов, Тимур Турсунбаев, принцип выборки классов понятен, спасибо за наводку. Вы управляете вкладками при помощи замены классов, у меня так не проходит, поскольку у меня спойлер не самописный, а стандартный движка, там навешаны свои обработчики, и у меня toggleClass нарушает работу внутреннего обработчика движка и у него крыша едет. Мне нужно 1) при клике на открытой вкладке ничего не делать (движок сам закроет ее), 2) а при клике по закрытой вкладке у нее самой классы не менять (движок сам ее откроет), а на открытых вкладках (если они есть открытые) вместо toggleClass программно кликнуть по ним. Как можно модифицировать ваш пример?

[Павел Корнилов]

у меня так не проходит, поскольку у меня спойлер не самописный, а стандартный движка,

В последнем примере, что я дал - ещё как пройдёт. Почитайте про делегирование событий - отличная вещь в JS, скажу вам. Тут вешается 1 обработчик на любой внешний/родительский контейнер. Выберите родительский блок без обработчиков - и используйте его. Если такового нет - сделайте свой враппер, в конце концов.
При таком подходе - внутренняя логика не нарушится, а ваша - будет работать совершенно отдельно от неё.

[Павел Корнилов]

2) а при клике по закрытой вкладке у нее самой классы не менять (движок сам ее откроет), а на открытых вкладках (если они есть открытые) вместо toggleClass программно кликнуть по ним.

Что значит "программно кликнуть"? Нужно инициировать обработчики, висящие на них? Или что?
Прямая подмена действий пользователей блокируется многими броузерами, поэтому нужно понять, что требуется сделать.

Answer 2

[WapSter]

Все работает

Comments

[Дмитрий]

Тимур Турсунбаев, да на codepen все работает, причем даже без (.a ...
Посмотрите, пожалуйста, этот вариант
Первым кликом добавляем элементу (b) класс (c), т.е. он теперь имеет класс (b c). По второму клику по этому же элементу должна быть вызвана функция для (b c) и залить его зеленым. Но этого не происходит. Что неправильно?

[Антон]

Дмитрий, на момент назначения обработчика для .b.c таких элементов нет. Поэтому обработчик надо вешать на документ или родительский элемент внутри которого будут элементы с двумя классами.

[WapSter]

Дмитрий, написать условие для элементов b, если не хотите на документ ставить событие:

$('.b').on('click', function () {
   if ($(this).hasClass('c')) { 
      //Поменять цвет фона
   } else {
      // Добавить класс с
   }
});

[Дмитрий]

Антон, т.е. обработчик назначается при загрузке страницы, а после добавления класса страница не перезагружается, поэтому обработчик второго класса не видит... Так? Теперь понятно, но легче не стало. Проблема в том, что таких элементов на странице несколько с одинаковыми родительскими элементами, т.е. с одинаковым набором классов у этих родителей, а мне нужно выбрать именно этот единственный элемент, которому предыдущим обработчиком был добавлен второй класс. Как это сделать? Буксую...

[Антон]

Дмитрий, нужен еще какой-то признак. Этот второй класс вы добавляете или какой-то внешний скрипт? Если вы - добавьте еще какой-нибудь атрибут для различия.
Вообзе похоже на задачу ХУ, вы можете простыми сломаи описать вашу задачку, что у вас происходит и что ам надо.

[Дмитрий]

Антон, речь идет о вкладках спойлера. На странице несколько спойлеров, в каждом множество вкладок с фреймами и документами в них. Сейчас вкладки можно открывать произвольно в любых количествах и сочетаниях. Принципиально важно, чтобы вкладки открывались строго по одной на странице, т.е. при открытии закрытой вкладки предыдущая открытая (в этом спойлере или в другом на этой странице) закрывалась. Спойлер стандартный движка, поэтому переписать его код невозможно. Заменить на рукописный или на аккордеон муторно, страница довольно большая. К тому же аккордеон будет иметь свою логику, которая тоже не подходит. Вкладки спойлера имеют некий класс (spoiler), к которому при открытии вкладки движок добавляет класс active. Поэтому задача по клику на элементе с классом spoiler вызвать обработчик, которым программно кликнуть по элементу (или элементам, если по какой-то причине их несколько) с классом spoiler active. А если по какому-то глюку открытых оказалось несколько, то по клику с элементом spoiler active программно кликнуть по всем остальным с этим классом.

[Дмитрий]

Тимур Турсунбаев, я не то чтобы не хочу на документ ставить событие, я не понял, что вы имеете в виду. Меня любой вариант устроит, в том числе и с событиями, задачу в общем виде я описал в предыдущем комментарии, буду благодарен за любые подсказки.

[WapSter]

Дмитрий,

$('.spoiler').on('click', function () {
    $('.spoiler.active').removeClass('active');
   if (!$(this).hasClass('active')) { 
      $(this).addClass('active');
   }
});

[WapSter]

Дмитрий, что не ясного то уже и код дал, вот вам еще и пример

[Павел Корнилов]

Тимур Турсунбаев, всё верно. Но нет нужды навешивать столько обработчиков - на каждый спойлер.
Я бы оптимизировал так - https://codepen.io/KorniloFF/pen/xMLpbg
Всё же один - лучше множества в данной ситуации, ИМХО.

Answer 3

[Дмитрий]

Все заработало в лучшем виде, с селекторами мне помогли, с остальным сам разобраться. Всем, кто мне помог - Антон, Павел Корнилов, Тимур Турсунбаев - огромное СПАСИБО!!!
В итоге получилось так:

<script type="text/javascript"> jQuery(function($) {
$(document).ready(function() { //когда страница полностью загружена
$('.spoiler').on('click', function(e) { //когда происходит клик по любой вкладке любого спойлера
if (e.which) //если этот клик произведен пользователем (кнопкой мыши)
    {
    $(this).addClass('user-click'); //добавить признак что клик произведен пользователем
    if ($(this).hasClass('active')) //если эта вкладка в момент клика была закрыта
        {
        $(document.querySelectorAll('.spoiler.active:not(.user-click)')).click();
        }
    $(document.querySelectorAll('.spoiler.active.user-click')).removeClass('user-click'); //удалить признак что клик произведен пользователем
    }
});
});
});
</script>

Правда тут заточено конкретно под мой случай, но принцип общий, вдруг кому пригодится

Comments

[Павел Корнилов]

Возможно, буду казаться упрямым, но всё же это не best practic.
Нужно делать как-то так (не зная нюансов):

jQuery(function ($) {
	$('.spoiler').parent().on('click', '.spoiler', function (e) { //когда происходит клик по любой вкладке любого спойлера
		if (e.which) //если этот клик произведен пользователем (кнопкой мыши)
		{
			$(this).addClass('user-click'); //добавить признак что клик произведен пользователем
			if ($(this).hasClass('active')) //если эта вкладка в момент клика была закрыта
			{
				$(this.querySelectorAll('.spoiler.active:not(.user-click)')).triggerHahdler('click');
			}
			$(this.querySelectorAll('.spoiler.active.user-click')).removeClass('user-click'); //удалить признак что клик произведен пользователем
		}
	});
});

/**
 * Достигается:
 * 1. Сокращение обработчиков до 1
 * 2. Нет повторного ожидания загрузки страницы
 * 3. Поиск производится не по всему документу, а только в родительском контейнере
 */

[Дмитрий]

Павел Корнилов, заменил код.
С этим фрагментом:
$('.spoiler').parent().on('click', '.spoiler', function (e) {
все работает так же, как в моем варианте.
А вот с этим:
$(this.querySelectorAll('.spoiler.active:not(.user-click)')).triggerHandler('click');
не работает, т.е. спойлер работает в обычном режиме, вкладки открываются-закрываются в любых количествах. А вот если вместо this прописать document, то все опять работает.

[Павел Корнилов]

Дмитрий, а если так:

$(this).find('.spoiler.active:not(.user-click)').triggerHahdler('click');

[Дмитрий]

Павел Корнилов, неа, то же самое, открываются-закрываются произвольно. И опять же если заменить this на document - работает как задумано.

[Павел Корнилов]

Дмитрий, ну, как последний вариант:

$(this).find('.spoiler.active:not(.user-click)').trigger('click');

[Дмитрий]

Павел Корнилов, то же самое, с this вообще не работает, c dokument открываются по одному, но у меня еще навешен скроллинг открытой вкладки кверху окна для удобства чтения, так вот этот вариант даже с document ломает напрочь весь скроллинг, все улетает куда-то за горизонт.
У меня к вам вопрос. Итого есть три рабочих варианта, с которыми все работает как надо - и вкладки открываются по одной, и скроллинг подкручивает открытую аккурат под срез меню:
1) $(document.querySelectorAll('.spoiler.active:not(.user-click)')).click();
2) $(document.querySelectorAll('.spoiler.active:not(.user-click)')).triggerHandler('click');
3) $(document).find('.spoiler.active:not(.user-click)').triggerHandler('click');
В каждом из трех вариантов результат один и тот же. В чем разница между ними, в смысле чем одно лучше или хуже другого?

[Павел Корнилов]

$(document).find('.spoiler.active:not(.user-click)').triggerHandler('click');

==

$(document.querySelectorAll('.spoiler.active:not(.user-click)')).triggerHandler('click');

Метод click()топорно пытается эмулировать клик пользователя.
Метод find() возвращает такую же коллекцию jOuery узлов, подошедших под указанный селектор.
Метод triggerHandler() заставляет срабатывать все обработчики переданного события, без инициализации самого события.