jQuery - 在按钮单击时显示 div 内容（模态样式）

Question

我的目标是隐藏所有 div（通过 css 类），然后在模态样式弹出窗口中显示它们（再次通过 css 完成）。例如：

<a href="" id="speclinkOpen">Show Spec</a>
<div class="speclink">   
    <h1>This is spec 1</h1>
    <a id="speclinkClose">Close</a>    
</div>

<a href="" id="speclinkOpen">Show Spec</a>
<div class="speclink">   
    <h1>This is spec 2</h1>
    <a id="speclinkClose">Close</a>    
</div>

div 中的内容（speclink 类）是隐藏的。当他们按下按钮（id speclinkOpen）时，我希望它显示相关内容，因此如果单击顶部按钮，则为“这是规范 1”，如果单击底部按钮，则为“这是规范 2。

我知道我需要使用 on.click THIS 而不是实际的类名，但不完全确定我是怎么做的..有人可以帮我解释一下吗？

本质上，jQuery 会以覆盖样式显示 div 内容，但它如何知道要加载的 div 内容是基于使用相同类名的 im 按下的哪个按钮？命名每个不同不是一个选项，因为我有这么多，但也许我正在以完全错误的方式解决这个问题？谢谢约翰。

Answer 1

看看data attributes。

你可以在你的 html 中做类似的事情：

<a href="#" class="speclinkOpen" data-div="div1">Show Spec</a>
<div class="speclink" id="div1">   
    <h1>This is spec 1</h1>
    <a id="speclinkClose1">Close</a>    
</div>

<a href="#" class="speclinkOpen" data-div="div2">Show Spec</a>
<div class="speclink" id="div2">   
    <h1>This is spec 2</h1>
    <a id="speclinkClose2">Close</a>    
</div>

在 jQuery 脚本中：

$(function(){
    $('img.speclinkOpen').on('click', function(){
       var id = $(this).data('div'); // take the id to "highlight"
       $('#' + id).addClass('modal'); // do whatever you want in with class or .css()
    });
});

编辑

如果您不能使用数据属性，因为您无法将 id 属性唯一地分配给您的 div：

$(function(){
    $('img.speclinkOpen').on('click', function(){
       $(this).next('div.speclink').addClass('modal'); // do whatever you want in with class or .css()
    });
});