javascript - 在 Javascript + Jquery 显示/隐藏中动态创建编号的 div

Question

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

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

我在 Jquery UI 中还有以下代码:

 function ShowHide(){
$("#eventbox"+1).animate({"height": "toggle"}, { duration: 1000 });
}
 <div id="eventbox">
<a onclick="ShowHide(); return false;" href="" id="dialog_link">Show/Hide</a></div

我想知道如何启用每个 div 的显示/隐藏选项。我想在每个 div 中都有一个显示/隐藏链接，每次按下它时，只有这个 div 隐藏/显示。

Answer 1

我将使用 jQuery 创建元素，同时将处理程序绑定(bind)到 anchor 标记。如果将 anchor 标记放在 div 内，则隐藏 div 后就无法显示它。所以我将 anchor 附加到 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);
}

或者，您也可以使用 parent()，而不是使用 ID 来查找 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() {                    
                jQuery(this).parent().animate({"height" : "toggle"}, {duration: 1000});
             });
    jQuery(body).append($div);
    $div.after($a);
}

编辑所以这里有问题。隐藏 div 后就无法显示它，因为链接位于 div 内部。也许您可以将链接放在 div 之外？不确定您想在这里完成什么。