如何将计数器的值替换为特定值

Question

我通过更改 num rooms 的值创建了一些输入 input.I 想将 counter 的值替换为 span 中的特定值。例如在下面的代码中：

   for (var i =1; i <= $num; i++){
      "<span class=' btn-block room-name'>Room" + i +"</span>"
     }

如果 i=1 ， 1 替换为 first in span 和 Result: Room first。 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();
        }

    });

Answer 1

更新代码：

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
      <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
      <link rel="stylesheet" type="text/css" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
  <style type="text/css">
  </style>
  <title>Fontawesome example</title>

<script type="text/javascript">//<![CDATA[
window.onload=function(){

var number= ['zero', 'first', 'second', 'third', 'fourth', 'fifth'];

$(document).ready(function () {
        $(".numRoom-btn").change(function () {
          
            switch ($(this).val()) {
                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++) {

            $('#room-container').append("<div class='numRoom calendar-container'>"+
            "<span class=' btn-block room-name'>Room " + number[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>");
            }
        }

        function clearBefore() {
            $('.numRoom').remove();
        }

    });
}//]]> 

</script>
</head>
<body>
 <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>

    
</body></html>

Answer 2

你可以稍微简化一下。你总是不想清空容器，你从输入中知道房间的数量。

<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 https://jsbin.com/luyarowaku/edit?html,console,output

如何将计数器的值替换为特定值

how can replace value of counter to specific value

javascript

jquery

jquery-plugins