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

Answer 2

您可以在链接和相应的div之间设置命名约定。

<a id="toggle-box1" class="toggler">click/show</a>
<div id="box1">hide me</div>

然后一般地设置它们：

$(".toggler").click(function() {
 var targetId = $(this).attr("id").replace("toggle-", "");
 $("#" + targetId).toggle(400);
});

Answer 3

未经测试，但它使用.each和上下文选择器：

<div class="group">
    <a class="toggle" href="#">toggle</a>
    <div class="content-hidden">content!</div>
</div>

<div class="group">
    <a class="toggle" href="#">toggle</a>
    <div class="content-hidden">content!</div>
</div>

<div class="group">
    <a class="toggle" href="#">toggle</a>
    <div class="content-hidden">content!</div>
</div>

<style>
div.content-hidden { display:none; }
</style>

<script>
$('.group').each(function() {
    var toggle = $('.toggle', this), content = $('.content-hidden', this);
    toggle.click(function(e) {
        e.preventDefault();
        $(content).toggle();
    });
});
</script>

Answer 4

几天前我问very similar question，因为我遇到了同样的问题。它可能会帮助你！提供了大量示例代码。

Answer 5

您需要以某种方式将显示/隐藏链接与相应的框连接。我建议使用这样的东西：

<a class="slick-toggle" href="#slickbox1">Show slickbox 1</a>

<div class="slick-box" id="slickbox1">
    Hidden content here
</div>

<a class="slick-toggle" href="#slickbox2">Show slickbox 2</a>

<div class="slick-box" id="slickbox2">
    Hidden content here
</div>

<a class="slick-toggle" href="#slickbox3">Show slickbox 3</a>

<div class="slick-box" id="slickbox3">
    Hidden content here
</div>

<script type="text/javascript">
    jQuery(function(){
        $('a.slick-toggle').click(function(){
            $($(this).attr('href')).toggle(400);
        });
    });
</script>

这样，每个链接的href属性都会将其连接到相应的div以进行切换。

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

5 个答案: