Как сделать если Анонсы есть - то активная кнопка

В шаблонах для всех страниц выводится чанк Анонсы событий/Реклама разделенные кнопкой. Как сделать если Анонсы есть — то активная кнопка Анонсы, если Анонсов нет — активная кнопка Реклама?

<div class="inner">
	<div class="buttons">
	<div class="inl">Анонсы</div><div class="inl active">Реклама</div>
	</div>
	<div class="items">
	  <div class="announc" style="display: none;">
		[[!pdoResources?
		&parents=`49`
		&sortdir=`DESC`
		&tpl=`anonsyTpl`
		&limit=`10`
		&includeTVs=`day, month, year`
		]]
	  </div>
	  <div class="article">
		[[!pdoResources?
		&parents=`82`
		&sortdir=`DESC`
		&tpl=`reklamaTpl`
		&limit=`1`
		&includeTVs=`name, tel`
		]]
	  </div>
	</div>
  </div>

Вячеслав

06 марта 2015, 14:43

1 178

Комментарии: 15

~~Андрей~~

06 марта 2015, 21:52

-1

С помощью JS скриптика для jQuery.
Например:

if ($('.announc').text()) {
	$('.article').css('display','none');
	$('.announc').css('display','block');
	$('.buttons div:first').addClass('active');
	$('.buttons div:last').removeClass('active');
}

В общем, помухлюйте с кодом))

Вячеслав

06 марта 2015, 22:06

Я так понимаю, что скрипт переставляет active и display в нужных местах. Мне не понятно как это происходит, как этот скрипт понимает что нет анонсов и куда нужно поключать скрипт?

~~Андрей~~

06 марта 2015, 22:15

$('.announc').text()

получает содержимое между тегами

<div class="announc">есть новости</div>

если значение НЕ пусто (т.е. новости есть), то скрывается блок div.article, отображается блок div.announc, добавляется CSS класс .active к первому блоку div в контейнере div.buttons и убирается CSS класс .active у второго (последнего) блока div в контейнере div.buttons

Вячеслав

06 марта 2015, 22:27

Что-то понял, буду пробовать. Спасибо.

Вячеслав

06 марта 2015, 23:29

Создал файл announcements_keywords.js по первому моему div, библиотека подключена.
Внутрь поместил:

if ($('.announc').text()) {
	$('.article').css('display','none');
	$('.announc').css('display','block');
	$('.buttons div:first').addClass('active');
	$('.buttons div:last').removeClass('active');
}

— ничего не работает и кнопка Анонсы событий/Реклама даже вручную не работает.

Мне подсказали еще вариант:

$(document).ready(function(){
    $('.announcements_keywords .buttons div').click(function(){
        if(!$(this).hasClass('active')){
            $(this).parent().find('.active').removeClass('active');
            $(this).addClass('active');
            $(this).closest('.inner').find('.items>div').hide().eq($(this).index()).show();
        }
    })
})

— кнопка вручную работает, но при отсутствии Анонсов не переключается на активную Рекламу.

Есть подсказка?

Руслан Кундиус

06 марта 2015, 23:34

Первый отвечает за переключение при отсутствии анонсов, второй за переключение по нажатию кнопки. Нужно подключать оба кода.

Так:

$(document).ready(function(){
    if ($('.announc').text()) {
	$('.article').css('display','none');
	$('.announc').css('display','block');
	$('.buttons div:first').addClass('active');
	$('.buttons div:last').removeClass('active');
    }

    $('.announcements_keywords .buttons div').click(function(){
        if(!$(this).hasClass('active')){
            $(this).parent().find('.active').removeClass('active');
            $(this).addClass('active');
            $(this).closest('.inner').find('.items>div').hide().eq($(this).index()).show();
        }
    })
})

Вячеслав

08 марта 2015, 13:21

Андрей подскажи, что можно помухлювать? Ни один блок не меняется, есть или нету новостей.

~~Андрей~~

08 марта 2015, 22:44

Вот весь код:
jsfiddle.net/tzqztsd0/

Удали в 6-ой строке слово «анонсы» и запусти скрипт заново кнопкой Run — будет отображена реклама.

P.S. пламенный привет минусовавшим!

Вячеслав

08 марта 2015, 22:47

спасибо

~~Андрей~~

08 марта 2015, 22:53

Если нужно с переключением блоков при нажатии по кнопкам Реклама / Анонсы, то так jsfiddle.net/d03hzq5d/

P.S. Я не понял какой вариант тебе нужен — просто скрывать блоки или с возможностью их переключения.

Вячеслав

08 марта 2015, 23:22

по умолчанию блок Анонсы активный, т.е. открытый видимый. Если нет Анонсов — активный блок Рекламы. Но в любых вариантах можно вручную кнопкой открывать и скрывать блоки.

Вячеслав

09 марта 2015, 12:11

Нашел свою ошибку — были лишние пробелы:

<div class="article">
		[[!pdoResources?

<div class="article">[[!pdoResources?

~~Андрей~~

09 марта 2015, 12:51

Чтобы пробелы не учитывались, измени условие так:

if ($('.announc').text() && $.trim($('.announc').text()) !== '') {

Василий Столейков

07 марта 2015, 21:06

А можешь и проще — делать это переключение на стороне сервера, а не пользователя.

Добавляешь вызову анонсов параметр &totalVar=`total-ann`
Выставляешь активный класс уже с помощью объявленного плейсхолдера [[+total-ann]]

Вот пример фильтрации из docs.modx.pro/system/basics/filters-input-and-output:

<div class="inner">
	<div class="buttons">
	<div class="inl[[+total-ann:is=`0`:then=``:else=` active`]]">Анонсы</div><div class="inl[[+total-ann:is=`0`:then=` active`:else=``]]">Реклама</div>
	</div>
	<div class="items">
	  <div class="announc"[[+total-ann:is=`0`:then=``:else=` style="display: none;`]]">
		[[!pdoResources?
		&parents=`49`
		&sortdir=`DESC`
		&tpl=`anonsyTpl`
		&limit=`10`
		&includeTVs=`day, month, year`
		]]
	  </div>
	  <div class="article">
		[[!pdoResources?
		&parents=`82`
		&sortdir=`DESC`
		&tpl=`reklamaTpl`
		&limit=`1`
		&includeTVs=`name, tel`
		]]
	  </div>
	</div>
  </div>

Идея должна работать — проверь её у себя и на ходу донастрой если нужно будет.

Вячеслав

08 марта 2015, 13:02