Форум Сайтостроение Веб-строительство

как добавить свойство всем внутренним блокам JS jQuery?

S3
На сайте с 29.03.2012
Offline
367
Sly32
770

Есть следующая конструкция с блоками описания


<div class="container descr">
            <div class="banner">
                Баннерная реклама –качественные интернет-ресурсы (охватные и тематические) с широким выбором форматов и рекламных мест.
            </div>
            <div class="video">
                Видеореклама позволяет охватить труднодостижимую ТВ-аудиторию. Мы предлагаем размещение рекламных роликов на ведущих ресурсах Рунета.
            </div>
            <div class="mobil">
                Использование мобльных версий рекламы позволяет получить высокие KPI  по низкой стоимости
            </div>
            <div class="smm">
                Реклама в социальных сетях - динамично развивающийся сегмент с ширким охватом пользователей
            </div>
            <div class="context">
                Используйте контекстную рекламу как наиболее релевантный инструмент продвижения продукта
            </div>
        </div>

нужно по клику на кнопку из этого блока 


<ul class="nav nav-pills">
                    <li class="filter" data-filter="all">
                        <a href="javascript:void(0)">Все виды</a>
                    </li>
                    <li class="filter" data-filter="banner">
                        <a href="javascript:void(0)">Баннерная реклама</a>

                    </li>
                    <li class="filter" data-filter="video">
                        <a href="javascript:void(0)">Видеореклама</a>
                    </li>
                    <li class="filter" data-filter="mobil">
                        <a href="javascript:void(0)">Мобильная реклама</a>
                    </li>
                    <li class="filter" data-filter="smm">
                        <a href="javascript:void(0)">Социальные сети</a>
                    </li>
                    <li class="filter" data-filter="context">
                        <a href="javascript:void(0)">Контекстная реклама</a>
                    </li>
                </ul>
всем внутренним блокам добавить display:none. Потом открывать тот блок, на кнопку которого кликнули- эту часть я написал. как скрыть все лишние - не знаю.

К классам блока (video, mobil) привязываться нельзя. Скрывать родительский блок целиком тоже

Не могу сообразить, как такое сделать?

UPD. Нашел решение, оказывается все просто. Этот код будет удалять описание всех блоков и потом выводить только тот, на который кликнули


jQuery(document).ready(function($){
	$('.filter').click(function () {
		var $t = $(this);
		var thisFilter = $t.attr('data-filter');
		// alert(thisFilter)
		$('.descr *').hide()
		$('.'+ thisFilter).show()
	})

})

Если кто знает, как можно красивее - было бы интересно)

C
На сайте с 26.10.2013
Offline
54
colorito
#1

Не проверял, но мысль должна быть понятна

$('ul.nav a').on('click', function(){

$('.container div').css('display', 'none');

$('.container . ' + $(this).parent().data('filter')).css('display', 'block');

});

Услуги по парсингу данных (/ru/forum/939826), единоразовый и регулярный сбор данных. Любые объемы. Скрипты на PHP, создание и доработка, решение проблем с сайтами Пишите в личные сообщения или скайп
S3
На сайте с 29.03.2012
Offline
367
Sly32
#2

colorito, Спасибо, попробую и такой вариант.

смущает это

$('.container div').css('display', 'none'); - это всем внутренним дивам добавит display:none, так?

В принципе тоже, что и у меня, если приглядеться

C
На сайте с 26.10.2013
Offline
54
colorito
#3

Ваш вариант скрывает родительский блок (.descr), а мой - все его дочерние

В остальном аналогично, в принципе

Sly32:
colorito, Спасибо, попробую и такой вариант.
смущает это
$('.container div').css('display', 'none'); - это всем внутренним дивам добавит display:none, так?
В принципе тоже, что и у меня, если приглядеться
Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#4

colorito, вариант Sly32 скрывает все дочерние элементы.

Sly32, пробуйте так:


$('ul.nav a').on('click', function(){
    $('.descr > div').hide(0);
    $('.descr > .' + $(this).parent().data('filter')).slideDown(100);
});

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий