0

for ループで (XML ファイルから) 動的に作成された div に適用するときに、セレクターで変数を使用しようとしています。previewDialog は、最後の div をクリックしたときにのみ開きます。各概要 div をクリックしたときに previewDialog を開くにはどうすればよいですか?

<script type="text/javascript">
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "Library.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;

var f = xmlDoc.getElementsByTagName("FeaturedEntry");
var x = xmlDoc.getElementsByTagName("BookEntry");
for (b = 0; b < x.length; b++) {

  var bToString = b.toString();
  var overviewOpener = "#overview" + bToString;
  var previewDialog = "#preview" + bToString;

  // increase the default animation speed to exaggerate the effect
  $.fx.speeds._default = 1000;
  $(function () {
    $(previewDialog).dialog({
      autoOpen : false,
      show : "blind",
      hide : "explode"
    });

    $(overviewOpener).click(function () {
      $(previewDialog).dialog("open");
      return false;
    });

  });

  document.write(overviewOpener + " " + b.value + " " + bToString);
  document.write("<div id='overview");
  document.write(b);
  document.write("'><img id='cover' src='/ClientBin/");
  icon = x[b].getAttribute("Icon");
  document.write(icon);
  document.write("'/><br><strong><a href='http://www.google.com'>");
  title = x[b].getAttribute("Title");
  document.write(title);
  document.write("</a></strong><br>");
  author = x[b].getAttribute("Author");
  document.write(author);
  document.write("<br>");
  document.write("Rating:");
  rating = x[b].getAttribute("Rating");
  numStars = Math.round(rating * 5);
  for (n = 0; n < numStars; n++) {
    document.write("<img src='/Media/star.png'/>");
  }
  document.write("<br><a><img id='button' src='Media/Small_iBookstore_Badge.gif' /></a>");
  document.write("</div>");

  document.write("<div id='preview");
  document.write(b);
  document.write("'>This is a test ");
  document.write(b);
  document.write("</div>");

}
</script>
4

2 に答える 2

1

私の友人を閉じます。閉鎖。問題は、 $(function () {あなたが思っているようにインラインで実行されず、DOM のロード時に実行されることです。しかし、あなたvar bは$(function)呼び出しの外にいます。つまり、この関数が呼び出されると、現在のバージョンの b が取得されます。これが、最後のバージョンに対してのみ機能することがわかる理由です。$(function) を完全に for ループの外に出してから、次のようにする必要があります。

$(function () {
  //add the for loop here 
    for (var b = 0; b < x.length; b++) {
        $("#preview" + b).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode"
        });

        $("#overview" + b).click(function () {
            $("#preview" + b).dialog("open");
            return false;
        });
    });

そうは言っても。あなたはまだそれを間違った方法でやっています。このようなループも正しい方法ではありません。あなたが本当にすべきことは、これの代わりです：

document.write("<div id='preview");
    document.write(b);
    document.write("'>This is a test ");
    document.write(b);
    document.write("</div>");

これを行う：

document.write("<div class='preview'>This is a test ");
    document.write(b);
    document.write("</div>");

各 div に同じ「プレビュー」クラスをどのように与えているかを確認してください。

今、あなたはこれを行うことができます：

$(function () {
      //no for loop needed now
            $(".preview").dialog({
                autoOpen: false,
                show: "blind",
                hide: "explode"
            });

編集済み：そうです、各divに一意の名前を付ける必要がありますが、あなたが考える理由とは正確ではありません。その理由は、jQuery UI ダイアログが要素を DOM の先頭に移動するためです。もともと、私はあなたが次のようなことをすると思っていました：

$(".overview").closest(".SomeContainerDiv").find(".preview")….しかし、残念ながら、この場合（divが移動されているため）、それはできません。このjsfiddleを見てください：

http://jsfiddle.net/ehs4K/

于 2012-04-24T02:29:48.560 に答える
0

コード全体を確認することはできませんでしたが、概要 div が動的に作成されていることを理解できました。動的に作成された要素については、使用する必要があります 

$(overviewOpener).live("click",function(){
//hanfle click function});
于 2012-04-24T02:31:43.763 に答える