是否可以從'for'創建'變量'？

Question

這裏我的循環代碼

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/

有人能幫忙嗎？或者建議我該怎麼做？謝謝

Answer 1

你的主要問題是你試圖引用#selected它存在之前。我已經爲你清理了一些東西。

希望這會有所幫助。

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(); 
 
});

.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; 
 
}

<div id="haha"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>