По клику на кнопку добавлять стиль родительскому контейнеру кнопки, одновременно с этим, одноименным контейнерам задавать общий стиль?

Question

[Чёкатилло]

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

Нагляднее станет понятнее )) https://jsfiddle.net/L057ya3d/

Все это надо для того что бы назначать не кликнутым контейнерам размытость (либо что-то еще)

Воот..
Как теперь доделать скрипт, что бы остальным контейнерам тоже задавать стиль, но один на всех, при открытом одном контейнере?

Будьте любезны, сделайте что нибудь с этим )
Спасибо за внимание!

Answer 1

[Роман Савицкий]

Думаю так будет то что ты хочешь)
Добавь это после jQuery(document).ready(function($) {

$('#content .boxcontainer').on('click', 'article button.emb', function(){
        
        $('#content .boxcontainer').children('article').removeClass('active');
		$('#content .boxcontainer').children('article').addClass('non_active');

		embButtonClick( $(this) );

		$(this).parents('article').removeClass('non_active');
		$(this).parents('article').addClass('active');

	});

Свою функцию измени на эти две:

function embButtonClick(thisss) {
  
      var block = thisss.next('.meta-data'),
        pinbox = thisss.parents('.pinbox');

      pinbox.toggleClass('pinbox_active');

      if (pinbox.hasClass('pinbox_active')) {
        block.slideDown(100);
        $(document).on('click', function(event) {
          if ($(event.target).closest(pinbox).length) {
            if (!$('.modal-backdrop').length)
              $('body').append('<div class="modal-backdrop fade in"></div>');
              $('.modal-backdrop').bind('click', ModalBackdropClear);
            return;
          }
          block.hide(100);
          pinbox.removeClass('pinbox_active');
          $('.modal-backdrop').remove();
          event.stopPropagation();
        });
      }

}

function ModalBackdropClear(){
    $('#content .boxcontainer').children('article').removeClass('active non_active');
}

Answer 2

[KnightForce]

Своими словами:
В момент клика в родителе ищешь все нужные потомки через children или find() и добавляешь нужный класс.
Можешь фильтровать активный элемент.

Абстрактный код:

var parent = $(".parent");

parent .click(function(e) {
  $(e.target).addClass("active");
  parent.find("button:not(.active)").addClass("blur");
});

Либо всем потомкам контейнера установи размытие, а активному отменяй.

Comments

[Чёкатилло]

Спасибо за развернутый ответ )
а потом какой стиль в css прописать .parent?
Я тут добавил ваши строки https://jsfiddle.net/4guh3c6b/
Не знаю..вроде не мешает работе, но визуально не понятно
Скрипты вообще не мой уровень Я не пойму )

[KnightForce]

Дмитрий: ну если ты плохо шаришь, то объяснять долго.)
Например, добавь родительскому элементу стиль container, а потомкам child:

.container .child {
     Настрой здесь размытость
 }
 .container .child.active {
     Убери размытость
 }

Либо просто удаляй класс child.

Определи целевой элемент и работай с ним.