如何为列表中的每个项目创建一个唯一的 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;
    });
  });
});