按钮选择 id答案

【问题标题】：Button selects id按钮选择 id
【发布时间】：2016-05-18 05:01:21
【问题描述】：

所以我有这些按钮，我希望它们显示具有相同 ID 的部分。

<aside>
    <button type="button" id="N">16-50mm</button>
    <button type="button" id="J">25-75mm</button>
    <button type="button" id="M">30-50mm</button>
    <button type="button" id="G">50-120mm</button>
    <button type="button" id="K">50-100mm</button>
    <button type="button" id="A">75-200mm</button>
    <button type="button" id="C">75-200mm</button>
    <button type="button" id="F">75-150mm</button>                  
</aside>

<section id="N">
    <figure>
        <a href="A1.html"><img src="Images/000-001.jpg" alt="Image1 A1"></a>
        <br>
        <figcaption>Name</figcaption>
    </figure>
</section>

<section id="J">
    <figure>
        <a href="A1.html"><img src="Images/000-001.jpg" alt="Image2 A1"></a>
        <br>
        <figcaption>Name2</figcaption>
    </figure>
</section>

我在某处看到人们使用 data-id 或 data-attribute 来显示特定的 id。我可以制作类似<button type="button" data-id="N">16-50mm</button> 的东西吗，它应该显示<section id="N">。如果有人可以帮助我解决这个问题，我将不胜感激。

【问题讨论】：

ID 在一个页面中不能是唯一的。制作第二个 css class

标签： jquery button hyperlink

【解决方案1】：

如您所见，单个document 中不能有重复的id 属性。更好的方法是使用data 属性。试试这个：

$('aside button').click(function() {
  $('section').hide().filter('#' + $(this).data('id')).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside>
  <button type="button" data-id="N">16-50mm</button>
  <button type="button" data-id="J">25-75mm</button>
  <button type="button" data-id="M">30-50mm</button>
  <button type="button" data-id="G">50-120mm</button>
  <button type="button" data-id="K">50-100mm</button>
  <button type="button" data-id="A">75-200mm</button>
  <button type="button" data-id="C">75-200mm</button>
  <button type="button" data-id="F">75-150mm</button>
</aside>

<section id="N">
  <figure>
    <a href="A1.html">
      <img src="Images/000-001.jpg" alt="Image1 A1">
    </a>
    <br>
    <figcaption>Name</figcaption>
  </figure>
</section>

<section id="J">
  <figure>
    <a href="A1.html">
      <img src="Images/000-001.jpg" alt="Image2 A1">
    </a>
    <br>
    <figcaption>Name2</figcaption>
  </figure>
</section>

Working example

【讨论】：

天哪，你是我的救星！这正是我一直在寻找的。我知道这很简单，但我还没有设法做到这一点。完美无瑕，谢谢！

【解决方案2】：

将sections 的ID 更改为class。然后使用以下内容开始。

$('aside button').click(function(event){
  $('section.' + this.id).addClass('hide')
      .siblings('section').removeClass('hide');
})

.hide{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<aside>
    <button type="button" id="N">16-50mm</button>
    <button type="button" id="J">25-75mm</button>
    <button type="button" id="M">30-50mm</button>
    <button type="button" id="G">50-120mm</button>
    <button type="button" id="K">50-100mm</button>
    <button type="button" id="A">75-200mm</button>
    <button type="button" id="C">75-200mm</button>
    <button type="button" id="F">75-150mm</button>                  
</aside>

<section class="N hide">
    <figure>
        <a href="A1.html"><img src="Images/000-001.jpg" alt="Image1 A1"></a>
        <br>
        <figcaption>Name</figcaption>
    </figure>
</section>

<section class="J hide">
    <figure>
        <a href="A1.html"><img src="Images/000-001.jpg" alt="Image2 A1"></a>
        <br>
        <figcaption>Name2</figcaption>
    </figure>
</section>

【讨论】：

【解决方案3】：

你的问题不清楚。如果您希望按钮逐个显示按钮单击事件，则不能在按钮和部分上使用相同的“id”。也许澄清你的问题，以便我可以帮助你。

【讨论】：

我想我的问题很清楚。感谢您的反馈，但@RoryMcCrossan 为我回答了。