как может заменить значение счетчика на определенное значение

создать несколько входов с изменением значения Кол-во комнат input.I хотите заменить значение счетчика на определенное значение в промежутке .for например, в коде ниже:как может заменить значение счетчика на определенное значение

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

если i = 1, 1 заменить первым в промежутке и Результат: Комната первая. я = 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(); 
     } 

    });

источник

2017-02-02 user3903648

Я думаю, что вам не хватает DIV в HTML тела с идентификатором «комната-контейнер» добавить, что и он будет работать: P – WebSwami

Нет, я забыл скопировать этот – user3903648

Я обновил свой код, пожалуйста, проверьте. – WebSwami

обновленный код:

<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>

источник

2017-02-02 15:12:52 WebSwami

Вы можете упростить Тхи немного. Вы всегда не должны пустить контейнер, и вы знаете количество комнат с входа.

<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

источник

2017-02-02 15:17:31

Моя проблема заключается в том, что я хочу создать комнату сначала, а не комнату 1, комнату вторую, а не комнату 2 и ... – user3903648

как может заменить значение счетчика на определенное значение

ответ

Смежные вопросы