Question

我想重用html块内容web app（我使用jquery和bootstrap）。

我有一个像这样的大html块：

<div class="row form-group">
    <label class="col-lg-4 control-label" for="distMotors">Drawing size</label>
    <div class="col-lg-8">
        <div class="col-sm-6" style="padding: 0px">
            <label style="width:5em; float:left; padding-top: 8px;"
                    class="control-label visible-xs" for="drawingWidth">Width</label>
            <div class="input-group" style="max-width: 10em">
                <input disabled type="number" id=drawingWidth min="10" max="500"
                        class="form-control" placeholder="150" data-error="Set a number between 10 and 500.">
                <span class="input-group-addon">cm</span>
            </div>

        </div>
        <span class="col-sm-1 hidden-xs"style="text-align: center; padding: 7px 0px">X</span>
        <label style="width:5em; float:left; padding-top: 8px;"
                class="control-label visible-xs" for="drawingHeight">Height</label>
        <div class="col-sm-5" style="padding: 0px">
            <div class="input-group" style="max-width: 10em">
                <input disabled id=drawingHeight type="number" min="10" max="500"
                        class="form-control" placeholder="150" data-error="Set a number between 10 and 500.">
                <span class="input-group-addon">cm</span>
            </div>
        </div>
        <span class="help-block">Width and height of the drawing on the showcase.</span>
        <div class="help-block with-errors"></div>
    </div>
</div>

我的页面中有几个像这样的块，所以我的html文件会变得一团糟。我正在寻找一个库或一个小框架来做这样的事情：

首先我定义了我的html块结构和外观;
然后我多次使用它，并且我只更改了有趣的值，例如id，placeholder等。

有类似的东西吗？

Answer 1

您可以使用jQuery复制顶部div，更改内部的一些属性，然后将其插入页面的其他位置。根据您拥有的后端堆栈，它们中的大多数还支持部分视图，这些视图完全针对此类场景构建。

jQuery的：

var element = $('.row.form-group').clone();
element.children('.input-group').attr('id', new_id); // change attribute
$('.new_parent').append(element); // .new-parent is the class of the element to which you want to append the copy

Answer 2

您可以创建一个包含id，占位符文本等的多维数组。然后循环创建表单。

示例：https://jsfiddle.net/gue9ryqo/

HTML

<div id='contents'></div>

JQUERY

var arr = [
    ['one', 'placeholder1'],
    ['two', 'placeholder2'],
    ['three', 'placeholder3']
    ];
for(i=0; i<arr.length; i++){
   $('#contents').append(
       "<div>"+
        "<label>Label</label>"+
            "<input type='text' id='"+arr[i][0]+"' placeholder='"+arr[i][1]+"'/>"+
       "</div>"
       );
    }

有没有办法制作HTML可重用块？

2 个答案: