Функция в цикле - JQuery

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

Ну, в первую очередь вы должны связать одно событие ready вместо двенадцати и поместить цикл внутри обработчика события.

Это, кстати, решит вашу проблему с переменной. Когда вы связали двенадцать обработчиков событий в цикле, все они будут запускаться после завершения цикла, а 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 2

Я предполагаю, что у вас есть $ (функция() {}) в цикле while. это фактически сокращение $ (document) .ready (function() {}), и этот документ готов только один раз. попробуйте поместить время внутри части документа. см., если это работает

Answer 3

Я бы переписал ваш код, чтобы иметь петлю внутри функции.

Как это:

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

Кроме того, я бы сильно рекомендую устанавливать var i = 1 и сохранять все if (i == 0) -statements. Если это действительно не нужно? Я не уверен. В этом случае изменение #dialog на # dialog0 в html было бы неплохо, если возможно.

Answer 4

Спасибо всем вам за ответы. Я пробовал все решения, но работа Гуффа работала для меня. Я не думал, что эти обработчики событий будут работать после цикла, так что спасибо за кучу ваших объяснений. :) Проблема решена!