我想在循环中创建编号的 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 隐藏/显示。
最佳答案
我将使用 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 之外?不确定您想在这里完成什么。
关于javascript - 在 Javascript + Jquery 显示/隐藏中动态创建编号的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2483923/