代码之家 › 专栏 › 技术社区 › MAMA

切片数组以使用javascript创建卡片

twitter-bootstrap ajax css html javascript

MAMA · 技术社区 · 7 年前

我正在使用bootstrap创建卡片,使用以下示例链接: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_portfolio&stacked=h

我正在使用ajax将卡片数据推送到全局阵列中。

htmlCards = [];

$.ajax({
    async: true,
    url: 'xxx.com',
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(data) {

        for(var i=0; i<data.length; i++) {
            htmlCards.push("<div class='col-sm-3'><img class='movie-selection' src="+eval(data[i].title.replace(/\s+/g, '').replace(':', '').toLowerCase())+" class='img-responsive' style='width:100%'><p class='movie-selection' >"+data[i].title+"</p></div>");
        }
    }
});

现在所有的牌都被推到我的全局数组中。我正在使用bootstrap列出所有卡。然而,我想在每个3张卡片列表中给一个中断行。如下所示:

<div id="listing-main">
    <div class="row">
        <div class="col-sm-3">
            <p>Some text..</p>
            <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
        </div>
        <div class="col-sm-3">
            <p>Some text..</p>
            <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
        </div>
        <div class="col-sm-3">
            <p>Some text..</p>
            <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <p>Some text..</p>
            <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
        </div>
        <div class="col-sm-3">
            <p>Some text..</p>
            <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
        </div>
        <div class="col-sm-3">
            <p>Some text..</p>
            <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
        </div>
    </div>
</div>

我如何使用ajax做到这一点?

我们将不胜感激!!

1 回复 | 直到 7 年前

Tan Duong 7 年前

可能是你在找的东西

var htmlCards = [
  '<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">',
  '<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">',
  '<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">',
  '<img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">'
]
    for (var i = 0; i < htmlCards.length; i++) {
       var appendDiv = $(htmlCards[i]);
       if (i % 3 === 0) {
         appendDiv = $('<div class="row row' + (i /3) + '">').append(appendDiv);
         $('#listing-main').append(appendDiv);
       } else {
         console.log(Math.floor(i/3));
         $('#listing-main').find('.row' + Math.floor(i/3)).append(appendDiv);
       }

    }

请参见 codepen