Question

我正在尝试在for循环中应用于动态创建的div（来自XML文件）时在我的选择器中使用变量。只有当我点击最后一个div时，才会打开previewDialog。当我点击EACH概述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>

Answer 1

关闭我的朋友。闭包。问题是$(function () {不像你想象的那样内联执行，它是在DOM加载时执行的。但是你的var b是$(function)调用的外部，这意味着当调用此函数时，它将获取b的当前版本，这就是为什么你只看到它适用于最后一个。你需要将你的$（函数）完全放在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 Dialog将元素移动到DOM的顶部。最初，我以为你会做类似的事情：

$(".overview").closest(".SomeContainerDiv").find(".preview") ....但不幸的是，在这种情况下（因为div被移动），你不能这样做。看看这个jsfiddle：

http://jsfiddle.net/ehs4K/

Answer 2

我无法浏览整个代码但是从我能理解的概述div是动态创建的。对于动态创建的元素，你必须使用

$(overviewOpener).live("click",function(){
//hanfle click function});

在jQuery中，如何在for循环中正确使用选择器作为var？

2 个答案: