如何为列表中的每个项目创建唯一的Jquery对话框？

Question

我在Jinja2的帮助下用Python构建了一个基于浏览器的应用程序，并且希望为文件列表中的每个项目添加一个对话框。例如，我的Python/Jinja2的生成以下HTML：

<div id="dialog">Unique data goes here.</div> 
... 
<li class="ui-widget-content">something.pdf</li> 
<li class="ui-widget-content">something else.zip</li> 
<li class="ui-widget-content">something else(1).zip</li> 
... 

我想每个<li>是一个调出给Javascript，显示对话框，并为每个对话框包含与独特的信息列表中的文件。这份名单也不断变化。这里是JS代码，我到目前为止，但这只是带来了第一个项目列表中的每个<li>标签：

$.fx.speeds._default = 1000; 
$(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     show: "slide", 
     hide: "fade" 
    }); 
}); 
$(document).ready(function(){ 
    $("#selectable").children("li").each(function() { 
     $(this).mouseover(function(){ 
      $(this).css("background-color","#FECA40"); 
     }); 
     $(this).mouseout(function(){ 
      $(this).css("background-color","white"); 
     }); 
     $(this).click(function(){ 
      $("#dialog").dialog("open"); 
      return false; 
    }); 
    }); 
}); 

我很新的Javascript和我在这一个完全丧失。我认为完成这个的唯一方法是为每个<div>分配一个独特的id，然后为每个id创建相应的功能。由于该列表超过了300个文件，这似乎不是一个聪明的想法。给每个<li>标签设置自己独特的对话框的最佳方式是什么？谢谢！

Answer 1

这是行不通的？

$.fx.speeds._default = 1000; 
$(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     show: "slide", 
     hide: "fade" 
    }); 
}); 
$(document).ready(function(){ 
    $("#selectable").children("li").each(function() { 
     $(this).mouseover(function(){ 
      $(this).css("background-color","#FECA40"); 
     }); 
     $(this).mouseout(function(){ 
      $(this).css("background-color","white"); 
     }); 
     $(this).click(function(){ 
      // if no dialog has been created for this li 
      if (!$(this).data('dialog')) { 
       // initialize one 
       $(this).data('dialog', 
        $('<div />') 
         //.text($(this).text()) // set the text of the dialog 
         .load('someurl.php?file=' + encodeURIComponent($(this).text())) // set content by ajax request 
         .dialog({autoOpen: false}) 
      ); 
      } 
      var dlg = $(this).data('dialog'); 
      dlg.dialog("open"); 
      return false; 
    }); 
    }); 
});