Question

我试图在StackOverflow上搜索我的问题的解决方案，但我没有找到。我正在编写一个不是由我制作的剧本。在JQuery上工作的人根本没有使用循环。所以我试图用循环重写代码。

在开始时，就像这样：

$(function() {
    $( "#dialog" ).dialog({
    width: 550,
      autoOpen: false,
    modal: true,
    dialogClass: "dialog_style1",
    open: function() {
        $(".ui-widget-overlay").bind("click",function(){
            $("#dialog").dialog("close");
        })
    }
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open");
    });
  });

  $(function() {
    $( "#dialog1" ).dialog({
    width: 550,
      autoOpen: false,
    modal: true,
    dialogClass: "dialog_style1",
    open: function() {
        $(".ui-widget-overlay").bind("click",function(){
            $("#dialog1").dialog("close");
        })
    }
    });

    $( "#opener1" ).click(function() {
      $( "#dialog1" ).dialog( "open");
    });
  });

  $(function() {
    $( "#dialog2" ).dialog({
    width: 550,
      autoOpen: false,
    modal: true,
    dialogClass: "dialog_style1",
    open: function() {
        $(".ui-widget-overlay").bind("click",function(){
            $("#dialog2").dialog("close");
        })
    }
    });

    $( "#opener2" ).click(function() {
      $( "#dialog2" ).dialog( "open");
    });
  });

所以它对于不同的对象来说是相同的功能。实际上，还有10个相同的代码^^。这就是为什么我尝试使用循环：while。所以我重写了整个代码来获取这个：

var i = 0 ;
while(i<12){

    $(function() {
        var dial = "";
        if(i != 0){ dial = "#dialog"+i; }else{ dial = "#dialog";}
        var opener = "";
        if(i != 0){ opener = "#opener"+i; }else{ opener = "#opener";}

        $(dial).dialog({
        width: 550,
          autoOpen: false,
        modal: true,
        dialogClass: "dialog_style1",
        open: function() {
            $(".ui-widget-overlay").bind("click",function(){
                $(dial).dialog("close");
            })
        }
        });

        $( opener ).click(function() {
          $( dial ).dialog( "open");
        });
    });

    i++;
}

我认为以后使用循环会很简单。所以我认为这会做同样的指示。问题是它根本不起作用。我不知道我的代码的解决方案。也许这是由于动态创建功能的问题... ...

感谢您的阅读，我等待您的帮助：）

Answer 1

我的猜测是你在while循环中有$（function（）{}）。这实际上是$（document）.ready（function（）{}）的简写，而该文档就绪只触发一次。尝试将文件放入文档准备部分。看看是否有效

Answer 2

我会重写你的代码，让函数内的循环。

像这样：

$(function() {
    var i = 0;
    while(i<12){        
        #code
        i++;
    }
});

另外，我强烈建议设置var i = 1并保存所有if (i == 0) - 语句。除非实际需要这些？我不确定。在这种情况下，如果可能的话，在html中将 #dialog 更改为＃dialog0 会很不错。

Answer 3

好吧，首先你应该绑定一个ready事件而不是12个事件，并将循环放在事件处理程序中。

这将偶然解决您的变量问题。当您在循环中绑定了12个事件处理程序时，所有这些都将在循环结束后运行，i将为所有这些处理程序设置值12。通过直接在循环中运行代码，变量具有每个项目的正确值。

但是，您仍然遇到dial和open事件处理程序中使用的click变量的问题，因此您需要一个为该变量创建闭包的函数，这样循环中的每个迭代都有自己的dial变量：

$(function() {

  for (var i = 0; i < 12; i++){

    var opener = i == 0 ? "#opener" : "#opener" + i;

    (function(dial){

      $(dial).dialog({
        width: 550,
        autoOpen: false,
        modal: true,
        dialogClass: "dialog_style1",
        open: function() {
          $(".ui-widget-overlay").bind("click",function(){
            $(dial).dialog("close");
          })
        }
      });

      $( opener ).click(function() {
        $( dial ).dialog( "open");
      });

    })(i == 0 ? "#dialog" : "#dialog" + i)

  }

});

Answer 4

感谢各位的回答。我尝试了所有的解决方案，但Guffa的解决方案适合我。我没想到那些事件处理程序会在循环之后运行，所以感谢一堆你的解释。 :) 问题解决了！

循环中的函数--JQuery

4 个答案: