这是我的循环代码
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/
有人可以帮忙吗?或建议我该怎么办?谢谢
答案 0 :(得分:-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();
});
&#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;