Показать/скрыть div на клик, если имена классов div соответствуют

У меня есть два набора div - один, который является «основным» div, а другой - «дополнительным» div. Оба они имеют классы, которые вводятся через CMS.Показать/скрыть div на клик, если имена классов div соответствуют

Каков наилучший способ показать/скрыть (желательно slideToggle) каждый div, по щелчку, который соответствует щелчку div?

<div class="each-business-content-main" data-id="group-1"></div> 
<div class="each-business-content-main" data-id="group-2"></div> 
<div class="each-business-content-extra group-1"></div> 
<div class="each-business-content-extra group-2"></div>

Эти «группа-1» или классы «группы 2» не известны заранее, так не может быть жестко закодированы в. По существу, я задаюсь вопросом, как, если вы нажмете на один DIV это показывает другой div (если они имеют одно и то же имя класса).

Я попытался это до сих пор:

$('.each-business-content-main').on('click', function (e) { 
     e.preventDefault(); 
    var id = $(this).data('id'); 
    jQuery('.each-business-content-extra').slideUp(); 
    jQuery('.each-business-content-extra .' + id).slideDown(); 
});

Но я предполагаю, hrefs и идентификатор может пригодиться? Или некоторые другие данные, идентификатор ...

источник

2013-09-10 John the Painter

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

Извините - обновлено. –

Если присвоить атрибут данных в вашу диву он делает это довольно легко:

<div class="each-business-content-main group-1" data-group="1">main 1</div> 
<div class="each-business-content-main group-2" data-group="2">main 2</div> 
<div class="each-business-content-extra group-1" data-group="1">extra 1</div> 
<div class="each-business-content-extra group-2" data-group="2">extra 2</div> 
$('.each-business-content-main').click(function() { 
    $('.each-business-content-extra.group-' + $(this).data('group')).slideToggle(); 
});

jsFiddle example

источник

2013-09-10 15:46:41 j08691

Можете ли вы добавить больше, чем письмо или номер в группу данных? У меня есть это, и он не работает ... '

' –

Абсолютно. Я просто выбрал это, так как я ленив;) HTML тогда будет 'data-group =" fish "', и jQuery потребуется настройка. '$ ('. each-business-content-extra.group-' + $ (this) .data ('group'))' будет тогда '$ ('. each-business-content-extra.' + $ (это) .data ('group') + '- group') ' – j08691

А ну, извините ... но нет« группы », поскольку в следующем наборе div есть группа« testmark-vaccines-ltd »- мы можем использовать вместо идентификаторов данных? –

Вы пробовали заменить это:

jQuery('.each-business-content .' + id).slideDown();

... с этим:

jQuery('.each-business-content #' + id).slideDown();

JQuery выбирает имена классов, как .classname и идентификаторы в #id.

источник

2013-09-10 15:38:53

Попробуйте

$('.each-business-content').click(function() { 
    var that = $(this); 
    $('.each-business-content').each(function() { 
    if ($(this) === that) { 
     $(this).slideUp(); 
    } else { 
     $(this).slideDown(); 
    } 
    }); 
});

источник

2013-09-10 15:46:22 beautifulcoder

Вы можете попробовать этот code at jsFiddle? Не нужны группы 1 и 2, я использую индекс вместо имени id. Это тебе подходит?

$('.each-business-content-main').on('click', function (e) { 
    $('.each-business-content-extra').(':eq(' + $(this).index() + ')').slideDown(); 
    $('.each-business-content-extra').not(':eq(' + $(this).index() + ')').slideUp(); 
});

источник

2013-09-10 16:17:56 zipher

Показать/скрыть div на клик, если имена классов div соответствуют

ответ

Смежные вопросы