Как добавить цикл для набора div-классов?

Это набор div, где я хочу добавить цикл на некоторый счет.Как добавить цикл для набора div-классов?

Я пробовал jquery и javascript, но не работает. Пожалуйста, помогите.

Требуется отсчет от флажка, а количество - это значения, выбранные в флажке, который необходимо динамически заполнять следующим набором div. Я написал jquery, который получает счет, а также значения флажка. Когда и когда пользователь выбирает эти поля, набор divs должен отображаться как количество счетчиков.

function arrayValues(item, index) 
    { 
     var cd = $("input[name=car_damage]:checked"); 
     var eg = cd.map(function() {return this.value;}).get().join(","); 
     var temp = new Array(); 
     temp = eg.split(","); 
     text=""; 
     alert(temp); 
     //alert(eg); 
     var ef = cd.size(); 
     alert(ef); 
}

код Checkbox:

<hr> 

       <div class="car_map" id="carmap"> 
        <div class="row"> 
         <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4"> 
          <div class="item"> 
           Front 
           <input type="checkbox" name="car_damage" value="Front" /> 
          </div> 
         </div>     
        </div> 
        <div class="row"> 
         <div class="col-xs-5 col-sm-4"> 
          <div class="item">       
           Front Wing Left 
           <input type="checkbox" name="car_damage" value="Front Wing Left"/> 
          </div> 
         </div> 
         <div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4"> 
          <div class="item"> 
           Front Wing Right 
          <input type="checkbox" name="car_damage" value="Front Wing Right"/> 
          </div> 
         </div>     
        </div> 
        <div class="row margin-bottom"> 
         <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4"> 
          <div class="item"> 
           Bonnet 
           <input type="checkbox" name="car_damage" value="Bonnet"/> 
          </div> 
         </div>     
        </div> 
        <div class="row"> 
         <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 "> 
          <div class="item"> 
           Windscreen 
           <input type="checkbox" name="car_damage" value="Windscreen"/> 
          </div> 
         </div>     
        </div> 
        <div class="row margin-bottom"> 
         <div class="col-xs-5 col-sm-4"> 
          <div class="item"> 
           Front Door Left 
           <input type="checkbox" name="car_damage" value="Front Door Left"/> 
          </div> 
         </div> 
         <div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4"> 
          <div class="item"> 
           Front Door Right 
           <input type="checkbox" name="car_damage" value="Front Door Right"/> 
          </div> 
         </div> 
        </div> 
        <div class="row margin-bottom"> 
         <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 "> 
          <div class="item"> 
           Roof 
           <input type="checkbox" name="car_damage" value="Roof"/> 
          </div> 
         </div>     
        </div> 
        <div class="row"> 
         <div class="col-xs-5 col-sm-4"> 
          <div class="item"> 
           Back Door Left 
           <input type="checkbox" name="car_damage" value="Back Door Left"/> 
          </div> 
         </div> 
         <div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4"> 
          <div class="item"> 
           Back Door Right 
           <input type="checkbox" name="car_damage" value="Back Door Right"/> 
          </div> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 "> 
          <div class="item"> 
           Rear Windscreen 
           <input type="checkbox" name="car_damage" value="Rear Windscreen"/> 
          </div> 
         </div>     
        </div> 
        <div class="row"> 
         <div class="col-xs-5 col-sm-4"> 
          <div class="item"> 
           Rear Left 
           <input type="checkbox" name="car_damage" value="Rear Left"/> 
          </div> 
         </div> 
         <div class="col-xs-5 col-xs-offset-2 col-sm-4 col-sm-offset-4"> 
          <div class="item"> 
           Rear Right 
           <input type="checkbox" name="car_damage" value="Rear Right"/> 
          </div> 
         </div>     
        </div> 
        <div class="row"> 
         <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-4 "> 
          <div class="item"> 
           Rear 
           <input type="checkbox" name="car_damage" value="Rear"/> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="row">  
        <div class="col-xs-12 col-sm-4 col-md-4"> 
         <div class="btn btn-custom btn-sm btn-decline center-block" data-scroll="step3">Back</div> 
        </div> 
        <div class="col-xs-12 col-sm-4 col-md-4"> 
         <div class="btn btn-custom btn-sm btn-decline center-block">Save For Later</div> 
        </div> 
        <div class="col-xs-12 col-sm-4 col-md-4"> 
         <div class="btn btn-sm btn-custom center-block" data-scroll="step5" id="add_trip" onclick="arrayValues()">Continue</div> 
        </div> 
       </div> 
      </div>

<hr> 
 
<div class="col-xs-12 col-sm-6"> 
 
    <div class="form-label"> 
 
    Rear 
 
    </div> 
 
    <div class="photo-picker" id="photo-picker"> 
 
    </div> 
 
</div> 
 
<div class="col-xs-12 col-sm-6"> 
 
    <div class="box photos"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <h4>Photo Instructions</h4> 
 
     </div> 
 
    </div> 
 
    <div class="photo-sample" id="photo-sample"> 
 
     <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <div class="form-sublabel"> 
 
      Stand approx. 2m back from the Rear of the vehicle.</div> 
 
      <imgsrc="/hfiprojectstorefront/_ui/desktop/common/hfiproject/images/placeholder-photo.png" class="img-responsive center-block" alt="" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="photo-real" id="photo-real"> 
 
     <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <div class="cont"> 
 
      <video id="v" class="img-responsive center-block"></video> 
 
      <div class="player-buttons" id="take" style="display:none;"></div> 
 
      </div> 
 
      <canvas id="canvas" style="display:none;"></canvas> 
 
      <img src="" id="photo" class="img-responsive center-block" /> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
      <div class="form-label"> 
 
      Was this photo taken at the scene? 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
      <div class="list-group segmented-control"> 
 
      <span class="list-group-item half active"> 
 
     YES 
 
     <input type="radio" name="scene_photo" value="YES" checked="checked"/> 
 
     </span> 
 
      <span class="list-group-item half "> 
 
     NO 
 
     <input type="radio" name="scene_photo" value="NO"/> 
 
     </span> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
      <div class="form-label"> 
 
      Optional Comment 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-12"> 
 
      <textarea class="form-control" name="optional" id="optional"></textarea> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-12 col-sm-6"> 
 
      <a href="" class="btn btn-custom btn-sm btn-decline center-block">Delete</a> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-6"> 
 
      <a href="" class="btn btn-custom btn-sm center-block">Save</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<hr>

источник

2017-01-24 Namitha

Сделать jsfiddle и поделиться ссылкой с этой скрипкой –

Пожалуйста, объясните, что вы пытаетесь достичь. – Rajesh

У меня есть список флажков, а при выборе флажков я хочу динамически спеть этот набор div и взять ввод от пользователя. – Namitha

Не ясно, решение, которое вы ищете.

Однако, требуя наименьшего количества работы, было бы создание функции для выполнения при изменении и jquery для управления вашими элементами DOM, но это не отличное решение, хотя если вам требуется управление состоянием.

Я считаю, что лучшим решением будет использование reactjs, где использование может создавать компоненты и использовать jsx.

или рамки AngularJS, где вы можете выполнить ng-repeat или настраиваемую директиву, которая принимает входные данные для отображения ваших div.

источник

2017-01-24 06:56:38

Действительно непонятно, что вы пытаетесь заполнить, но вы можете генерировать любой элемент DOM динамически, как это.

fnCreateDOMElement = function(el, num, context) { 
    var e = document.createElement(el); 
    for(var i=0; i<num; i++){ 
    document.context.appendChild(e); 
    } 
}

вышеупомянутый сниппет можно использовать.

document.getElementById("populator").addEventListener('change', function(){ 
 
    //reset contents of container if needed. comment if not needed 
 
    document.getElementById('container').innerHTML = ""; 
 
    var times = this.value; 
 
    for(var i=0; i<times; i++) { 
 
    var mydiv = document.createElement('div'); 
 
    var myparag = document.createElement('p'); 
 

 
    mydiv.setAttribute('class', 'foo'); 
 
    myparag.setAttribute('class', 'fooized');  
 
    
 
    var txt = document.createTextNode('Foo #'+(i+1)); 
 
    myparag.appendChild(txt); 
 
    
 
    mydiv.appendChild(myparag); 
 
    
 
    document.getElementById('container').appendChild(mydiv); 
 
    } 
 

 
});

<div id="container"> 
 
    
 
</div> 
 
<input type="number" min="0" placeholder="how many?" id="populator">

выше функций может быть переработан с в JavaScript default/optional arguments.

источник

2017-01-24 07:25:15 marmeladze

Вышеприведенный код не работает. Первые два фрагмента в

Как добавить цикл для набора div-классов?

ответ

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