文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何为一组div类添加循环？

问如何为一组div类添加循环？
EN

Stack Overflow用户
提问于 2017-01-24 14:21:43
回答 2查看 65关注 0票数 2

这是一组div，我想在其中添加一些循环。

我尝试过jquery和javascript，但不起作用。请帮帮忙。

它从复选框中获取计数，计数是在复选框中选择的值。以下div集需要动态填充。我已经编写了一个获取计数和复选框values.As的jquery，当用户选择这些框时，div集需要显示为计数的数量。

代码语言：javascript
复制
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);
}

复选框代码：

代码语言：javascript
复制
<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>

​

代码语言：javascript
复制
<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>

​

javascript
jquery
html
EN

回答 2

Stack Overflow用户

发布于 2017-01-24 14:56:38

目前尚不清楚您正在寻求的解决方案。

但是，需要最少工作量的方法是创建一个在更改时执行的函数，并使用jquery来操作DOM元素，但如果您需要状态管理，这不是一个很好的解决方案。

我认为一个更好的解决方案是使用reactjs，这样用户就可以创建组件并利用jsx。

或者AngularJS框架，在这些框架中，您可以执行ng-repeat或自定义指令，以获取显示div的输入。

票数 0
EN

Stack Overflow用户

发布于 2017-01-24 15:25:16

确实不清楚您试图填充的是什么，但是您可以像这样动态生成任何DOM元素。

代码语言：javascript
复制
fnCreateDOMElement = function(el, num, context) {
  var e = document.createElement(el);
  for(var i=0; i<num; i++){
    document.context.appendChild(e);
  }
}

上面的代码片段可以像这样使用。

​

代码语言：javascript
复制
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);   
  }

});
代码语言：javascript
复制
<div id="container">
  
</div>
<input type="number" min="0" placeholder="how many?" id="populator">

​

上面的函数可以用javascript的default/optional arguments进行重构。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41821329

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档