0

我有一个网页上显示的文件列表。（使用 Cherrypy 和 Jinja2 的基于浏览器的 Python 应用程序）我想要的是当用户单击列表中的一项时，会弹出一个漂亮的小 Jquery 对话框，并为他们提供有关他们单击的任何项目的附加信息。我已经设置并运行了对话框，减去了要进入的特定信息。这是我需要帮助的地方。

我编写了一个 Python 脚本来为页面上显示的列表中的每个项目创建 HTML 文件。例如，当用户单击显示列表中的 foo.pdf 时，如何加载 foo.html？

我有以下 Javascript 代码（@Sander Roes 提供）：

$(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 (!$(this).data('dialog')) {
              $(this).data('dialog', 
                  $('<div />')
                      .load('whatever.html')    // <-- This HTML file should  
                      .dialog({autoOpen: false, // coordinate with user selection
                   show: "slide",
                               hide: "fade",
                       width: 500,
               height: 500})
              );
          }
          var dlg = $(this).data('dialog');
          dlg.dialog( "open" );
          return false;
    });
  });
});

我的想法是为列表中的每个项目分配一个唯一的id然后基于该加载 .html 文件id，但我不确定如何在 Javascript 中执行它，或者我什至可以/应该在 Javascript 中执行它吗？谢谢！

更新：
@user1598086 提供的代码效果很好。我还投入了HTML5shiv以取得好成绩。不确定它是否需要，但认为它不会受到伤害。

4

1 回答 1

1

您可以使用data-属性，而不是 id： http ://ejohn.org/blog/html-5-data-attributes/

例如：

<li data-externalfile="whatever.html">Whatever</li>

然后（从您的代码中假设您使用的是 jQuery），而不是.load('whatever.html')在您的示例中，使用

.load(($this).attr("data-externalfile"))
于 2012-11-28T00:52:10.220 回答