Question

我有一个显示在网页上的文件列表。（使用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然后根据id加载.html文件，但我不确定如何在Javascript中执行此操作，或者如果我甚至可以/应该在Javascript中做到这一点？谢谢！

更新
@ user1598086提供的代码效果很好。我还提到了HTML5shiv以获得良好的衡量标准。不确定是否需要，但认为它不会受伤。

Answer 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"))

将变量HTML文件加载到Javascript对话框中

1 个答案: