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的show / hide选项。我想在每个div中都有一个显示/隐藏链接，每次按下时，只有这个div隐藏/显示。

Answer 1

我将使用jQuery创建元素并同时将处理程序绑定到锚标记。如果您将锚标记放在div中，则一旦隐藏了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);
}

或者，您也可以使用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中。也许你可以将链接放在div之外？不知道你想在这里完成什么。

Answer 2

假设以下初始结构

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

Answer 3

你可以做一些紧凑的事情：

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

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

另一个想法是你不需要div上的ID，除非你有一些外在的理由，一个类会更容易，像这样：

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

在Javascript + Jquery show / hide中动态创建编号的div

3 个答案: