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内容，但是如何根据使用相同类名的im按下哪个按钮来知道要加载哪个div内容？每个不同的命名不是一个选项，因为我有这么多，但也许我完全错误的方式解决问题？谢谢约翰。

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

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

1 个答案: