在 jQuery 中，我怎样才能正确地将选择器用作 for 循环中的变量

In jQuery how can I correctly use a selector as var in a for loop?

本文关键字：for 选择器 循环 变量 jQuery 正确地      更新时间：2023-09-26

当应用于for循环中动态创建的div（从XML文件）时，我正在尝试在我的选择器中使用变量。预览对话框仅在我单击最后一个div 时打开。如何让预览对话框在我单击每个概述div 时打开？

<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>

关闭我的朋友。闭 包。问题是$(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对话框将元素移动到DOM的顶部。 最初，我以为你会做这样的事情：

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

http://jsfiddle.net/ehs4K/

我无法浏览整个代码，但据我所知，概述div 是动态创建的。对于动态创建的元素，您必须使用 

$(overviewOpener).live("click",function(){
//hanfle click function});
相关文章：