在循環中獲取變量的值

Question

我有一個循環，當它被調用時，創建一個帶有一些表單元素的div。每個div都基於一個變量，「i」賦予字段和div唯一的名稱。有沒有一種方法可以將變量存儲在創建div的位置？

例如，創建了div1，並且其中的所有內容都具有附加到名稱的1（變量）。表單元素相互依賴，並由ID調用。問題是，當我創建一個新的div並將變量（i）更改爲2時，第一組表單元素嘗試使用2而不是1.

有意義嗎？

編輯：這是一些代碼。這很麻煩，所以我提前道歉。

var i = 0; 

    $('a#add-product').click(function(event){ 
     i++; 
     $('<div />').addClass('product').attr('id', 'product'+i) 
      .append($('<h2><img src="<?php echo base_url();?>img/product.png" alt="" />Product '+i+'</h2>')) 
      .append($('<div class="info-line"><label>Division</label><p><select id="selection-'+i+'" class="selection"><option value="">- Select a Division -</option><option value="abrasives">Abrasives</option><option value="tapes">Bonding, Surface Protection &amp; Tapes</option><option value="packaging">Packaging</option></select></p></div>')) 
      .append($('<div class="info-line"><label>Category</label><p><select id="selectionresult-'+i+'" name="selectionresult-'+i+'" class="selectionresult"></select><span id="result-'+i+'" class="result">&nbsp;</span></p></div>')) 
      .append($('<div class="info-line"><label>Product</label><p><select id="selectionresult2-'+i+'" name="selectionresult2-'+i+'" class="selectionresult2"></select><span id="result2-'+i+'" class="result2">&nbsp;</span></p></div>')) 
      .append($('<a class="remove" href="#add-product" id="remove-product'+i+'"><img src="<?php echo base_url();?>img/remove-product.jpg" alt="" />Remove Product</a>')) 
      .appendTo("#products"); 

      // START OF ADDITIONAL PRODUCT DROP DOWNS 

        $("#selectionresult-"+i).hide(); 
        $("#selectionresult2-"+i).hide(); 

        $("#selection-"+i).change(function() { 

         $(this).next(".selectionresult").hide(); 
         $(this).next(".selectionresult2").hide(); 
         $("#result-"+i).html('Retrieving ...'); 
         $.ajax({ 
          type: "POST", 
          data: "data=" + $(this).val(), 
          url: "<?php echo base_url();?>dropdown.php", 
          success: function(msg){ 
           if (msg != ''){ 
            $("#selectionresult-"+i).html(msg).show(); 
            $("#result-"+i).html(''); 
           } 
           else{ 
            $("#result-"+i).html('<em>No item result</em>'); 
           } 
          } 
         }); 

        }); 
        $("#selectionresult-"+i).change(function() { 
         $(this).next(".selectionresult2").hide(); 
         $("#result2-"+i).html('Retrieving ...'); 
         $.ajax({ 
          type: "POST", 
          data: "data=" + $(this).val(), 
          url: "<?php echo base_url();?>dropdown.php", 
          success: function(msg){ 
           if (msg != ''){ 
            $("#selectionresult2-"+i).html(msg).show(); 
            $("#result2-"+i).html(''); 
           } 
           else{ 
            $("#result2-"+i).html('<em>No item result</em>'); 
           } 
          } 
         }); 
        }); 
    }); 

Answer 1

您可以將需要在這樣一個封閉引用的i正確版本的代碼：

var i = 0; 

$('a#add-product').click(function(event){ 
    i++; 

    // Begin closure. When called (at the end of the closure) it receives 
    // the current value of "i". This value of "i" will be referenced 
    // throughout the closure as a local variable containing the value 
    // you expect, instead of the "shared" "i" variable outside the 
    // closure. 
    (function(i) { 

     // So basically we've created a new "scope" inside here. Now "i" 
     // is a separate local variable than the "i" variable ouside 
     // the closure. You could change the variable name by changing 
     // the parameter above. Like (function(my_i) {... 
     // If you did that, you would need to change the "i" in your .change() 
     // handlers to "my_i". The rest of them could stay the same, or you 
     // could change them. Either way would work. 
     // This is because the .change() handlers are executed at a later time 
     // (and so are the AJAX callbacks) so they need to use the variable 
     // that is local to this closure. 
     // The rest of the code, like $("#selectionresult-" + i) is executing 
     // immediately, so it could reference the "i" variable that is 
     // outside the closure, and still work properly. 

     $('<div />').addClass('product').attr('id', 'product'+i) 
      .append($('<h2><img src="<?php echo base_url();?>img/product.png" alt="" />Product '+i+'</h2>')) 
      .append($('<div class="info-line"><label>Division</label><p><select id="selection-'+i+'" class="selection"><option value="">- Select a Division -</option><option value="abrasives">Abrasives</option><option value="tapes">Bonding, Surface Protection &amp; Tapes</option><option value="packaging">Packaging</option></select></p></div>')) 
      .append($('<div class="info-line"><label>Category</label><p><select id="selectionresult-'+i+'" name="selectionresult-'+i+'" class="selectionresult"></select><span id="result-'+i+'" class="result">&nbsp;</span></p></div>')) 
      .append($('<div class="info-line"><label>Product</label><p><select id="selectionresult2-'+i+'" name="selectionresult2-'+i+'" class="selectionresult2"></select><span id="result2-'+i+'" class="result2">&nbsp;</span></p></div>')) 
      .append($('<a class="remove" href="#add-product" id="remove-product'+i+'"><img src="<?php echo base_url();?>img/remove-product.jpg" alt="" />Remove Product</a>')) 
      .appendTo("#products"); 

     // START OF ADDITIONAL PRODUCT DROP DOWNS 
     $("#selectionresult-" + i).hide(); 
     $("#selectionresult2-" + i).hide(); 

     $("#selection-" + i).change(function() { 

      $(this).next(".selectionresult").hide(); 
      $(this).next(".selectionresult2").hide(); 
      $("#result-" + i).html('Retrieving ...'); 
      $.ajax({ 
       type: "POST", 
       data: "data=" + $(this).val(), 
       url: "<?php echo base_url();?>dropdown.php", 
       success: function (msg) { 
        if (msg != '') { 
         $("#selectionresult-" + i).html(msg).show(); 
         $("#result-" + i).html(''); 
        } 
        else { 
         $("#result-" + i).html('<em>No item result</em>'); 
        } 
       } 
      }); 

     }); 
     $("#selectionresult-" + i).change(function() { 
      $(this).next(".selectionresult2").hide(); 
      $("#result2-" + i).html('Retrieving ...'); 
      $.ajax({ 
       type: "POST", 
       data: "data=" + $(this).val(), 
       url: "<?php echo base_url();?>dropdown.php", 
       success: function (msg) { 
        if (msg != '') { 
         $("#selectionresult2-" + i).html(msg).show(); 
         $("#result2-" + i).html(''); 
        } 
        else { 
         $("#result2-" + i).html('<em>No item result</em>'); 
        } 
       } 
      }); 
     }); 

    // End closure. Executes the closure function, passing in the 
    // current value of "i" 
    })(i); 
}); 

---

編輯：

爲了解釋發生了什麼，在JavaScript中，傳遞給（或創建於）函數體的變量對於該函數是本地的，並且它們會持續存在。

我上面正在做的是創建一個函數，接受一個參數。在這裏，我將更改名稱參數的或許更清楚：

function(inner_i) { 
    // create your element with the new local variable "inner_i" 
} 

...但我也調用，一旦我創建它的功能：

(function(inner_i) { 
    // create your element with the new local variable "inner_i" 
})(i) 
// ^------- call the function, passing in the "i" from your loop. 

語法看起來有點奇怪，但它只是一種調用剛剛創建的函數的方法。

這將是一樣的做：

function myNewFunction(inner_i) { 
    // creates your element with the new local variable "inner_i" 
} 

myNewFunction(i); // Call the function we just created above, 
        // and pass the "i" from the loop into it 

Answer 2

使用一個獨立的變量存儲在索引中，使用循環來添加到它。

粗略地說，帶循環的函數（不管是否用索引號調用另一個函數都是不相關的），但這樣你可以得到存儲的索引值，並使用你的循環，所以沒有重複。

var uniqueIndex = 0; 

function functionWithLoop(x) 
{ 
    for (i=0; i<x; i++) 
    { 
     uniqueIndex++; 
     createNewDivFunction(uniqueIndex); 
    } 
} 

Answer 3

從我能理解div1中的元素是指對方而不是div2中的元素。問題是，它們如何互相引用？如果是通過事件，例如一個文本框的onchange事件，那麼你就可以做到以下幾點：

var MAX = 10; 
for (var i = 0; i < MAX; i++) { 
    // Create textbox 
    $("<input type='text'>").attr("name", "slave" + i); 
    // Create a second textbox that, when changed, takes it's value, 
    // makes it uppercase, and copies it to the first one 
    $("<input type='text'>").attr("name", "master" + i) 
    .change(
     (function(i) { 
      function() { 
       $("input[name=slave" + i + "]").text($(this).text()); 
      } 
     })(i) 
    ); 
} 

它的作用是創建捕獲內本身的i價值的臨時範圍：

 (function(i) { 
      function() { 
       // the value of i is frozen in time within here 
      } 
     })(i) 

Answer 4

實際上，更簡單的答案是將整數作爲值存儲到您創建的每個元素。讓您擺脫封閉困擾，並且更易於維護。在你的循環只是做：

newElement.data("myIndex", i); 

，並檢索再次索引：

newElement.data("myIndex"); 

或者，如果事件處理程序中：

$(this).data("myIndex");