Javascript 如何将计数器的值替换为特定值
我通过更改num rooms input的值来创建一些输入。我想将counter的值替换为span中的特定值。例如,在下面的代码中:Javascript 如何将计数器的值替换为特定值,javascript,jquery,jquery-plugins,Javascript,Jquery,Jquery Plugins,我通过更改num rooms input的值来创建一些输入。我想将counter的值替换为span中的特定值。例如,在下面的代码中: for (var i =1; i <= $num; i++){ "<span class=' btn-block room-name'>Room" + i +"</span>" } 如果i=1,1替换为跨度中的第一个,结果为:房间优先。 i=2个房间,秒等 <div class="form-g
for (var i =1; i <= $num; i++){
"<span class=' btn-block room-name'>Room" + i +"</span>"
}
如果i=1,1替换为跨度中的第一个,结果为:房间优先。
i=2个房间,秒等
<div class="form-group col-sm-4">
<input type="number" class="form-control numRoom-btn" placeholder="num rooms" min="1" max="5" />
</div>
<div id="room-container"> </div>
$(document).ready(function () {
$(".numRoom-btn").change(function () {
switch (this.value) {
case "1":
clearBefore();
addRoom("1");
break;
case "2":
clearBefore();
addRoom("2");
break;
case "3":
clearBefore();
addRoom("3");
break;
case "4":
clearBefore();
addRoom("4");
break;
case "5":
clearBefore();
addRoom("5");
break;
}
});
function addRoom($num) {
for (var i =1; i <= $num; i++) {
var $addedElement = $(
"<div class='numRoom calendar-container'>"+
"<span class=' btn-block room-name'>Room" + i +"</span>" +
"<div class='form-group col-sm-4'>"+
"<span class='btn-block mb5'> Adult(+12)</span>"+
"<input type='number' class='form-control' placeholder='adult nums' min='1' max='9' />"+
"</div>"+
"<div class='form-group col-sm-4'>"+
"<span class='btn-block mb5'>child(-11)</span>"+
"<input type='number' class='form-control' placeholder='child nums' min='0' max='6' />"+
"</div>"+
"</div>");
$('#room-container').append($addedElement);
}
}
function clearBefore() {
$('.numRoom').remove();
}
});
更新代码:
这是一个很好的例子
//
你可以把它简化一点。您总是不想清空容器,并且您可以从输入中知道房间的数量
<script>
$(function(){
$(".numRoom-btn").on('change', function(e){
var numInput = $(e.target), $num = parseInt(numInput.val()), roomcontainer = $('#room-container');
roomcontainer.empty();
for(let i=0;i<$num;i++){
addRoom(i+1);
}
});
function addRoom($num){
var $addedElement = $(
"<div class='numRoom calendar-container'>"+
"<span class=' btn-block room-name'>Room" + $num +"</span>" +
"<div class='form-group col-sm-4'>"+
"<span class='btn-block mb5'> Adult(+12)</span>"+
"<input type='number' class='form-control' placeholder='adult nums' min='1' max='9' />"+
"</div>"+
"<div class='form-group col-sm-4'>"+
"<span class='btn-block mb5'>child(-11)</span>"+
"<input type='number' class='form-control' placeholder='child nums' min='0' max='6' />"+
"</div>"+
"</div>");
$('#room-container').append($addedElement);
}
});
请看这里的jsbin
我认为您在HTML正文中缺少div,id为room container。添加div即可:PNo我忘记了我已更新代码的副本,请检查。我的问题是我想先创建room而不是room 1,然后创建room second而不是room 2,然后。。。