Динамически создавать пронумерованные div в Javascript + Jquery показать / скрыть

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, и привязал бы обработчик к тегу привязки одновременно. Если вы поместите тег привязки в элемент 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, вы также можете использовать parent():

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? Не уверен, что вы пытаетесь достичь здесь.

Answer 2

Вы можете сделать что-то компактное, как это:

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, если у вас нет какой-либо внешней причины, класс будет проще, например:

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

Answer 3

Предполагая следующую начальную структуру

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

Следующий код делает то, что вы хотите, я geuss

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