在Javascript+；Jquery显示/隐藏

我想在循环中创建编号的div（比如eventbox1、eventbox2等），然后可以选择显示和隐藏它们

for (i=0; i<8; i++) {
var html = '<div id="eventbox"+i></div>';
content.innerHTML +=  html;
}

---

for（i=0；i我将使用jQuery创建元素，同时将处理程序绑定到锚定标记。如果将锚定标记放在div内，则隐藏后无法显示div。因此，我将锚定附加到div附近。不确定这是否是您想要的

for(var i = 0; i < 8; i++) {
    var $div = jQuery("<div></div>").attr("id", "eventbox" + i);
    var $a = jQuery("<a></a>").attr("id", "anchoreventbox" + i)
                              .html("Show/Hide")
                              .click(function() {
                var $a = jQuery(this);
                var eventboxID = $a.attr("id").replace(/anchor/, "");
                jQuery("#" + eventboxID).animate({"height" : "toggle"}, {duration: 1000});
             });
    jQuery(body).append($div);
    $div.after($a);
}

编辑因此这里有一个问题。一旦隐藏了div，就无法显示它，因为链接在div内部。也许可以将链接放在div外部？不确定您在这里试图实现什么。
假设以下初始结构

<div id="eventbox" />
<div id="content">
    <!-- here come the eventbox+x div's -->
</div>



下面的代码实现了您想要的功能

$(document).ready(function() {
    var html = '';
    var links = '';
    for (i=0; i<8; i++) {
        var event = 'eventbox'+i;
        html += '<div id="'+event+'">'+i+'</div>';
        links += '<a href="" id="a'+event+'">Show/Hide '+i+'</a>&nbsp;';
    }
    $("#content").html(html).find("div").hide();
    $("#eventbox").html(links);
    $("#eventbox a").click(function(eve) {
        eve.preventDefault();
        $("#content div:visible").hide();
        $("#"+this.id.substring(1)).animate({"height": "toggle"}, { duration: 1000 });
        return false;
    });
})

$（文档）.ready（函数（）{
var html=''；
var链接=“”；
对于（i=0；i你可以做如下紧凑的事情：

for(var i = 0; i < 8; i++) {
 $("<div></div>", {"id":"eventbox" + i}).append(
    $("<a></a>").text("Show/Hide").click(function() {
       $(this).closest("div").animate({"height" : "toggle"}, {duration: 1000});
    })).appendTo($(content));
}

for(var i = 0; i < 8; i++) {
 $("<div></div>", {"class":"event"}).before(
    $("<a></a>").text("Show/Hide").click(function() {
       $(this).next(".event").animate({"height" : "toggle"}, {duration: 1000});
    })).appendTo($(content));
}

for（变量i=0；i<8；i++）{
$（“”，{“id”：“eventbox”+i}）。追加(
$（“”）。文本（“显示/隐藏”）。单击（函数（）{
$（this）.closest（“div”）.animate（{“height”：“toggle”}，{duration:1000}）；
}))。附录（$（内容））；
}

但是div一旦关闭就不能打开…我想你想要锚在外面，然后它会是这样的：

for(var i = 0; i < 8; i++) {
 $("<div></div>", {"id":"eventbox" + i}).before(
   $("<a></a>").text("Show/Hide").click(function() {
      $(this).next("div").animate({"height" : "toggle"}, {duration: 1000});
   })).appendTo($(content));
}

for（变量i=0；i<8；i++）{
$（“”，{“id”：“eventbox”+i}）。之前(
$（“”）。文本（“显示/隐藏”）。单击（函数（）{
$（this.next（“div”）.animate（{“height”：“toggle”}，{duration:1000}）；
}))。附录（$（内容））；
}

另一个想法是，您不需要div上的ID，除非您有一些外部原因，否则类将更容易，如下所示：

for(var i = 0; i < 8; i++) {
 $("<div></div>", {"id":"eventbox" + i}).append(
    $("<a></a>").text("Show/Hide").click(function() {
       $(this).closest("div").animate({"height" : "toggle"}, {duration: 1000});
    })).appendTo($(content));
}

for(var i = 0; i < 8; i++) {
 $("<div></div>", {"class":"event"}).before(
    $("<a></a>").text("Show/Hide").click(function() {
       $(this).next(".event").animate({"height" : "toggle"}, {duration: 1000});
    })).appendTo($(content));
}

for（变量i=0；i<8；i++）{
$（“”，{“类”：“事件”}）(
$（“”）。文本（“显示/隐藏”）。单击（函数（）{
$（this.next（“.event”）.animate（{“height”：“toggle”}，{duration:1000}）；
}))。附录（$（内容））；
}
您能给每个eventbox一个唯一的ID吗？比如“eventbox\u 1”、“eventbox\u 2”等等…问题还不完全清楚。每个标签有一个标签吗？或者有一个标签应该显示/隐藏每个标签，一次一个？或者其他什么？我改变了它，我希望现在更清楚。如果你在div中有锚标签，并且div被隐藏，你会如何再次打开它？我很确定这不是exac需要什么…例如，链接不可能显示任何内容，它在折叠的div中。问题仍然需要澄清，因为最终结果没有多大意义。这是一个很好的观点。一旦div被隐藏，就无法打开它。我更改了解决方案，以便在div之后插入锚。在您的最后一个解决方案，
$a
从未插入文档，我想您希望
.after（）
在那里。argh。谢谢！这些总是让我绊倒！