Question

我想生成一个带有列的引导网格：calss =“col-lg-6”和“col-lg-3”。这是html：

<div class="container">
<div class="row">
<div class="col-lg-3">
    <img src="../dist/images/test-info.png" alt="TEST-PLAN"/>
</div>
<div class="col-lg-6">
    <img src="../dist/images/test-details.png" alt="TEST-DETAILS"/>
</div>
<div class="col-lg-3">
    <img src="../dist/images/test-stats.png" alt="TEST-STATS"/>
</div></div></div>

但是我想动态地生成上面的网格，这样当class ="col-lg-6"时，它应该显示'TEST-STATS'图像，其正确的位置在下面的json中提到：

var data = [
    {
        "widgetId": "widget_0",
        "title": "Test Info",
        "description": "",
        "type": "info",
        "dataType": "TEST_INFO",
        "position": {
            "col": 1,
            "row": 1,
            "size_x": 1,
            "size_y": 4
        }
    },
    {
        "widgetId": "widget_1",
        "title": "Test Details",
        "description": "",
        "type": "info",
        "dataType": "TEST_DETAILS",
        "position": {
            "col": 2,
            "row": 1,
            "size_x": 2,
            "size_y": 4
        }
    },
    {

     "widgetId": "widget_2",
     "title": "Test Stats",
     "description": "",
     "type": "info",
    "dataType": "TEST_STATS",
    "position": {
            "col": 4,
            "row": 1,
            "size_x": 1,
            "size_y": 4
               }
}]

每个图像都有自己的渲染位置，所以条件语句如：

if(class=="col-lg-6")
{//display image as 'TEST-DETAILS'}

如何创建动态模板并编写一个javascript函数来循环播放类并根据位置显示图像？

谢谢！

Answer 1

互联网上有很多例子。

我使用的最好的一个是：http://www.cssgrid.co/

非常轻松有力。

编辑：自2017年起，我正在使用CSS flex属性。在我看来，CSS Grid框架在那些日子里并不是真的有用。

Answer 2

您可以使用jQuery类选择器来选择具有col-lg-6类的元素，然后将属性alt设置为TEST-DETAILS 例如$（“。col-lg-6”）。attr（“ alt”，“ TEST-DETAILS”）

使用jquery动态创建引导网格列

2 个答案: