javascript - 使用 jquery 在行和列的 Bootstrap 网格中动态添加图像？

Question

<div class="modal fade" id="emojimodal" tabindex="-1" role="dialog" aria-labelledby="emojilabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" id="bgcolorheader">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title" id="myModalLabel">Select emoji</h3>
                </div>
                <!-- to be dynamically populated from js -->
                <div class="modal-body" id="modalDiv"> </div>
            </div>
        </div>
    </div>

我需要在模式中的 Bootstrap 网格的行和列中添加图像。我需要使用 jquery 动态地做到这一点。我首先从行开始，然后我还需要为每一列扩展相同的逻辑。以下函数仅显示第一张图像。如何让图像显示在多行中？

function createGrid(rownum, imagearraySrc) {
    for (var rowIndex = 0; rowIndex < rownum; rowIndex++) {
        var rowid = "row" + rowIndex;
        var $row = $("<div>", {
            "class": "row",
            "id": rowid
        });
        $('#modalDiv').append($row);

        var imgid = "img" + rowIndex;
        var $img = $("<img>", {
            "id": imgid,
            "src": imagearraySrc[rowIndex],
        });
        $($row[rowIndex]).append($img);
    }
};

传递给函数的 rownum 值为 2。 imagearraySrc 包含所有图像的 src。目标是有 x 行和 y 列，并且每行都有图像。所有这些都将显示在模式中，用户将选择其中之一。所附代码是一个起点，并不能帮助我继续前进。有人可以帮忙吗？

Answer 1

这里有一个解决方案 https://jsfiddle.net/kzxh0r5u/

var imagearraySrc = ["http://via.placeholder.com/350x150", "http://via.placeholder.com/350x150","http://via.placeholder.com/350x150", "http://via.placeholder.com/350x150","http://via.placeholder.com/350x150","http://via.placeholder.com/350x150","http://via.placeholder.com/350x150","http://via.placeholder.com/350x150","http://via.placeholder.com/350x150","http://via.placeholder.com/350x150","http://via.placeholder.com/350x150"];

function createGrid(rownum, colnum) {
  var imgCnt = 0;
  $('#modalDiv').append('<div class="container-fluid"></div>')
  for (var rowIndex = 0; rowIndex < rownum; rowIndex++) {
    $('#modalDiv > div.container-fluid').append('<div class="row" id="row' + rowIndex + '"></div>');
    for(var colIndex = 0; colIndex < colnum; colIndex++) {
      $('#row' + rowIndex).append('<div class="col-md-4 col-sm-6"><img src="' + imagearraySrc[imgCnt] + '" class="img-responsive" /></div>');
      imgCnt++;
    }
  }
};

createGrid(2,3);

$('#emojimodal').modal('show');

.row{
  padding-top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="emojimodal" tabindex="-1" role="dialog" aria-labelledby="emojilabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header" id="bgcolorheader">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title" id="myModalLabel">Select emoji</h3>
        </div>
        <!-- to be dynamically populated from js -->
        <div class="modal-body" id="modalDiv"> </div>
    </div>
  </div>
</div>

希望这对您有帮助。

首先我们需要将.container-fluid添加到模态主体，然后添加行以及列