Question

我有一组动态标题和隐藏的div，其中的想法是，当用户点击标题时，它会切换下方的div以显示/隐藏

所有div都有“div_x”形式的id，其中x是动态生成的

我设法使用.each（）循环遍历div_的所有div，我可以.split id的x部分，但我不确定如何获取jquery以使每个标题只显示/隐藏相关的其他div

$('#[id^=div_]').each(function(){

    exploded_id = this.id.split("_");
    id = exploded_id[2];

    $("#"+this.id).click(function() {

      $("#div_body_"+id).slideToggle("slow");

   });

});

我相信有人能指出这里的缺陷

Answer 1

为什么不使用实时函数并选择使用类？这样，您可以使用ajax动态添加任意数量的元素，然后自动采用相同的行为：

<div id="div_1" class="outer">
   <div class="body">
   </div>
</div>

<div id="div_2" class="outer">
   <div class="body">
   </div>
</div>

<div id="div_3" class="outer">
   <div class="body">
   </div>
</div>

然后使用：

$(function () {
    $('.outer').live("click" function () {
      $(this).find('.body').slideToggle("slow");
    });
});

Answer 2

您的选择器错误，您不需要在属性 - 开始 - 选择器前面#：

$('#[id^=div_]')

应该是以下任何一种：

$('[id^=div_]')
$('div[id^=div_]')

此外，您可以将点击处理程序应用于整个集合，此处不需要 each（）。例如：

$('div[id^=div_]').click(function(){
    var id = this.id.split("_").pop();
    $("#div_body_"+id).slideToggle("slow");
});

jQuery动态选择器显示div

2 个答案: