javascript - 显示 2 个具有相同 ID 和 Class onClick 的 Div

Question

有没有办法用 Jquery 显示 2 个具有相同 ID 和类 onClick 的 Div，无法解决这个问题。 (Div1/类 targetDiv)

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>

J查询:

$('.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/

非常感谢您的帮助!

Answer 1

在一个页面上不可能出现多次 ID。

ID = 标识符

如果您希望能够“绑定(bind)”页面上元素的可见性，您可以使用具有相同值的数据属性。

例如:

<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();
});