Question

我有这段代码：

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

Answer 1

正如我在评论中提到的，所有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对象 - 如何避免覆盖？

1 个答案: