Показать 2 Divs с тем же идентификатором и классом onClick

Есть ли способ показать 2 Divs с тем же идентификатором и классом onClick с JQuery, не могу решить эту проблему. (Div1/Класс targetDiv)Показать 2 Divs с тем же идентификатором и классом onClick

Html:

<div class="buttons"> 
    <a class="showSingle" data-target="1">Option 1</a> //With this 
    <a class="showSingle" data-target="2">Option 2</a> 
    <a class="showSingle" data-target="3">Option 3</a> 
    <a class="showSingle" data-target="4">Option 4</a> 
</div> 

<div id="div1" class="targetDiv">Lorum Ipsum 1</div> //Show this 
<div id="div1" class="targetDiv">Lorum Ipsum 1 Second</div> //And this 
<div id="div2" class="targetDiv">Lorum Ipsum 2</div> 
<div id="div3" class="targetDiv">Lorum Ipsum 3</div> 
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>

Jquery:

$('.showSingle').on('click', function() { 
    $(this).addClass('selected').siblings().removeClass('selected'); 
    $('.targetDiv').hide(); 
    $('#div' + $(this).data('target')).show(); 
}); 
$('.showSingle').first().click();

Fiddle: https://jsfiddle.net/XwN2L/5709/

Спасибо большое за помощь!

источник

2015-03-30 user3599221

Ваши две дивы не должны иметь один и тот же идентификатор. Идентификаторы должны быть уникальными для каждого элемента. Однако классы могут быть разделены между несколькими элементами. –

У вас никогда не должно быть двух элементов с одним и тем же идентификатором. Идентификация должна быть уникальной. Добавьте тот же класс к тем группам, которые вы хотите группировать (например, класс 'div1' к нескольким элементам), а затем покажите этот класс. – tabz100

мой плохой .. все работает сейчас. id уникальны ... должны знать это! Спасибо вам всем! – user3599221

Невозможно иметь более одного вхождения идентификатора на одной странице.

ID = Идентификатор

Если вы хотите, чтобы иметь возможность «привязки» видимость элементов на вас странице, вы можете использовать данные атрибутов с тем же значением.

Например:

<div class="links"> 
    <a href="#group-1">Group 1</a> 
    <a href="#group-2">Group 2</a> 
    <a href="#group-3">Group 3</a> 
    </div> 

    <div class="some-class" data-id="group-1"></div> 
    <div class="some-class" data-id="group-1"></div> 
    <div class="some-class" data-id="group-2"></div> 
    <div class="some-class" data-id="group-3"></div> 
    <div class="some-class" data-id="group-2"></div>

Тогда:

var $links = $('.links').find('a'); 

$links.on('click', function (e) { 
    e.preventDefault(); 

    var group = $(this).attr('href').replace('#', ''); 

    $('.some-class').hide(); 
    $('.some-class[data-id="' + group + '"]').show(); 
});

источник

2015-03-30 23:23:58 justinledouxweb

Показать 2 Divs с тем же идентификатором и классом onClick

ответ

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