可以从'for'创建'变量'吗?

时间:2016-11-04 02:38:40

标签: javascript jquery for-loop foreach each

这是我的循环代码

for(var i=0; i <=10; i++) {
        $wrapper.append('<input type="button" style="display:inline-block; margin:10px; border:1px solid #ccc; background-color:#fff; width:30px; height:30px; line-height:26px; cursor:pointer;" class="select" value="'+ i +'"/>');
    }

这是我的JS代码

var a = "<div class='questionerWrapper'>"+I want to add here+"</div>"

点击此处: 没有循环(我使用硬编码):https://jsfiddle.net/dedi_wibisono17/7m8mt5rb/

使用循环但我不知道如何包含它:https://jsfiddle.net/7m8mt5rb/4/

有人可以帮忙吗?或建议我该怎么办?谢谢

1 个答案:

答案 0 :(得分:-1)

您的主要问题是您在存在之前尝试引用 #selected 。我为你清理了一些东西。

希望这有帮助。

&#13;
&#13;
var kuisoner = [
  "<div class='questionerWrapper'>",
    "<div id='text'>",
      "Apakah anda puas dengan pelayanan kami? ",
      "Dari 0-10, seberapa mungkin anda akan merekomendasikan ",
      "layanan kami kepada orang yang anda kenal?",
    "</div>",
    "<div id='selected' class='selectWrapper'>",
      "<span>Tidak Rekomendasi</span>",
      "<span>Rekomendasi</span>",
    "</div>",
    "<div class='thanks'>thanks</div>",
  "</div>"
].join("");

$('#haha').append(kuisoner);

// ========================
// At this point #selected exists
// ========================

var $wrapper = $('#selected');
for (var i = 0; i <= 10; i++) {
  $wrapper.append('<input type="button" class="select" value="' + i + '"/>');
}

// ========================
// use classes rather than a list of ids...
// ========================

$("#selected .select").click(function(e) {
  var html = [
    "<div>",
      "Anda memilih ",
      "<strong>" + e.target.value + "</strong> ",
      "Terima kasih atas partisipasi Anda!",
    "</div>"
  ].join("")
  
  $("#selected, #text").fadeOut("slow");
  $(".thanks").html(html).fadeIn();
});
&#13;
.questionerWrapper {
  width: 980px;
  background-color: #D9E9FF;
  text-align: center;
  padding: 8px 0;
  margin: 0 auto;
}

#text {
  width: 640px;
  font-weight: bold;
  margin: 0 auto;
}

.questionerWrapper .selectWrapper {
  display:block; margin-top:5px;
}

.questionerWrapper .thanks {
  display:none; padding:10px;
}

#selected .select {
  display: inline-block;
  margin: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  width: 30px;
  height: 30px;
  line-height: 26px;
  cursor: pointer;
}
&#13;
<div id="haha"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;