使用for循環中的函數變量初始化JavaScript對象 - 如何避免覆蓋？

我有這樣的代碼：使用for循環中的函數變量初始化JavaScript對象 - 如何避免覆蓋？

for(i = 0; i < 1; i++){ 
     $("body").append(questions[i]); 

     for(j = 0; j < prompts.length; j++){ 
      var temp_id = "slider-" + j; 
      var temp_num_text_id = "slider-text-" + j; 

      var temptextdiv = $("<h5>50</h5>"); 
      $("body").append(temptextdiv); 
      temptextdiv.attr('id', temp_num_text_id); 

      var tempdiv = $("<div></div>"); 
      $("body").append(tempdiv); 
      tempdiv.attr('id', temp_id); 

      $("#" + temp_id).slider({ 
       min: 0, 
       max: 100, 
       value: 50, 
       slide: function(event, ui){ 
        $("#" + temp_num_text_id).html(ui.value); 
       } 
      }); 
     } 
    }

的目標是，以使有關問題的各種提示，每個都是在一個jQuery UI的滑塊做了一個排名問題。我的麻煩是試圖將顯示滑塊值的文本與滑塊本身「鏈接」。當我用一個滑塊測試時，它與上面顯示的滑塊對象聲明中的函數一樣簡單，但是當這在循環內完成時，所有滑塊只會更改最後一個滑塊的文本值。據我瞭解，從其他人的類似問題，循環的每一次迭代覆蓋以前的聲明。我如何避免這種情況？

來源

2017-05-31 user2762533

請提供您的「問題」和「提示」數據的示例。 – Twisty

另外，這個'for'循環只會在'i <1'上運行一次，只發生在'i = 0'時。 – Twisty

你的提示會創建重複的'id'屬性，這會產生問題：'slider-0'，'slider-1'，slider-2'。所以這將導致滑塊在每個循環中被重新分配給所有相同的選擇器。 – Twisty

正如我在評論中提到的，所有id屬性都應該是唯一的。這可以通過給ID分配一個連續的號碼來完成。

例如：https://jsfiddle.net/Twisty/vLut8ysw/

的JavaScript

var questions = [ 
    "<div id='q1'>Question 1</div>", 
    "<div id='q2'>Question 2</div>", 
    "<div id='q3'>Question 3</div>", 
    "<div id='q4'>Question 4</div>", 
    "<div id='q5'>Question 5</div>", 
]; 

var prompts = [ 
    25, 
    50, 
    75, 
]; 

var promptIds = 0; 

$(function() { 
    $.each(questions, function(q, i) { 
    $(i).appendTo("body"); 
    $.each(prompts, function(p, j) { 
     var temptextdiv = $("<h5>", { 
     id: "p-slider-text-" + promptIds 
     }).html(j).appendTo("body"); 

     var tempdiv = $("<div></div>", { 
     id: "p-slider-" + promptIds 
     }).appendTo("body"); 

     tempdiv.slider({ 
     min: 0, 
     max: 100, 
     value: j, 
     slide: function(event, ui) { 
      temptextdiv.html(ui.value); 
     } 
     }); 

     promptIds++; 
    }); 
    }); 
});

這將爲每個滑塊唯一的ID。

來源

2017-05-31 17:16:30 Twisty

使用for循環中的函數變量初始化JavaScript對象 - 如何避免覆蓋？

回答

相關問題