如何在jquery中创建show/hide div的多个实例？

Question

我有以下代码

$(document).ready(function() {
  $('a#slick-toggle').click(function() {
 $('#slickbox0').toggle(400);
 return false;
  });
});


<a id="slick-toggle" href="#">Show/Hide</a>

<div id="slickbox" style="display: none;">
hidden content here
</div>

问题是,如果在页面上的html部分有超过1个这样的实例,它就不会工作.我不是很擅长JS.div id我要独特......但是如何让每个链接切换相应的框？

Answer 1

您不应该在HTML中重复ID.但是您确实希望在jQuery中使用相同的功能,因此添加一个公共类名,以便您可以将该函数应用于所有这些锚点.

此外,由于您不确定HTML结构是否可预测,因此您需要在anchor元素和div元素之间输出一个链接.请注意下面的data-id属性:

<a id="someID" class="slick-toggle" data-id="334" href="#">Show/Hide</a>

<div id="someOtherID" class="slickbox" data-id="334" style="display: none;">
  hidden content here
</div>

这个"334"可能是任何东西.这将是您可以在输出内容时决定的独特内容.

现在,您的代码可以定位每个.slick-toggle类,并让它切换关联的div.

$(document).ready(function() {
    $('a.slick-toggle').click(function() {
        var dataID = $(this).attr("data-id");
        $("div[data-id=" + dataID + "].slickbox").toggle(400);
        return false;
    });
});