2

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に非常に慣れていないので、これに完全に夢中になっています。これを達成するために私が考えることができる唯一の方法は、それぞれに一意を割り当ててidから、それぞれ<div>に対応する関数を作成することですid。リストは300以上のファイルであるため、それはあまり賢明ではないように思われます。<li>各タグに独自のダイアログボックスを与えるための最良の方法は何ですか？ありがとう！

4

1 に答える 1

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;
    });
  });
});
于 2012-11-21T21:40:57.517 に答える