使用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的滑块做了一个排名问题。我的麻烦是试图将显示滑块值的文本与滑块本身“链接”。当我用一个滑块测试时，它与上面显示的滑块对象声明中的函数一样简单，但是当这在循环内完成时，所有滑块只会更改最后一个滑块的文本值。据我了解，从其他人的类似问题，循环的每一次迭代覆盖以前的声明。我如何避免这种情况？

请提供您的“问题”和“提示”数据的示例。 – Twisty

另外，这个'for'循环只会在'i 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。

使用for循环中的函数变量初始化JavaScript对象 - 如何避免覆盖？

相关推荐