动态自举轮播项目

Question

如何循环创建动态自举轮播项目？

这是json：

"pro": {
            "52": {
              "product_id": "52",
              "category_id": "109",
              "name": "Morder Rock Double 3"
            },
            "54": {
              "product_id": "54",
              "category_id": "109",
              "name": "Morder Rock Double 5"
            },
            "57": {
              "product_id": "57",
              "category_id": "109",
              "name": "Morder Rock Double 8"
            },
            "59": {
              "product_id": "59",
              "category_id": "109",
              "name": "Morder Rock Double 10"
            },
            "61": {
              "product_id": "61",
              "category_id": "109",
              "name": "Mordern Single Cutaway 12"
            },
            "62": {
              "product_id": "62",
              "category_id": "109",
              "name": "Mordern Single Cutaway 13"
            }
}

这是我的代码

var itemslist = '';
var product_Data ='';
itemslist += '<div class="item active"><div class="container"><div class="row">'
$.each(nvalue.pro, function (lkey, lvalue) {
    product_Data += '<div class="col-md-3">\n\
    ' + lvalue.name + '<img class="img-responsive" 
    src="image/product_images/1.jpg" alt="Los Angeles" /> \n\
    </div>';
});
itemslist += product_Data + '</div></div></div>';

我需要这样：

<div class="item active">
   <div class="container">
      <div class="row">
         <div class="col-md-3">
            Morder Rock Double 3<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles"> 
         </div>
         <div class="col-md-3">
            Morder Rock Double 5<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles"> 
         </div>
         <div class="col-md-3">
            Morder Rock Double 8<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles"> 
         </div>
         <div class="col-md-3">
            Morder Rock Double 10<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles"> 
         </div>

      </div>
   </div>
</div>

<div class="item">
   <div class="container">
      <div class="row">
        <div class="col-md-3">
            Mordern Single Cutaway 12<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles"> 
        </div>
        <div class="col-md-3">
            Mordern Single Cutaway 13<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles"> 
        </div> 
      </div>
   </div>
</div>

Answer 1

您需要添加一个索引，以跟踪添加了多少个元素，然后关闭一个滑块元素，然后每四张图像打开下一个。

我在下面的代码中添加了一个变量i ，并使用系数检查它是否为4的倍数以识别何时执行此操作。

  i % 4 

模数%将第一个数字（在这种情况下为变量i ）除以随后的数字，并返回余数 。

然后，您可以在if语句中使用它，就像变量的模数没有余数一样，它可以被4整除，因此必须是4的倍数。

// Check every fourth
if ( i % 4 == 0) {

   ...

}

---

演示

注意：我添加了更多的JSON数据，以证明该代码对于大型数据集仍然有效。

 var proJSON = { "pro": { "52": { "product_id": "52", "category_id": "109", "name": "Morder Rock Double 3" }, "54": { "product_id": "54", "category_id": "109", "name": "Morder Rock Double 5" }, "57": { "product_id": "57", "category_id": "109", "name": "Morder Rock Double 8" }, "59": { "product_id": "59", "category_id": "109", "name": "Morder Rock Double 10" }, "61": { "product_id": "61", "category_id": "109", "name": "Mordern Single Cutaway 12" }, "62": { "product_id": "62", "category_id": "109", "name": "Mordern Single Cutaway 13" }, "67": { "product_id": "57", "category_id": "109", "name": "Morder Rock Double 8" }, "68": { "product_id": "59", "category_id": "109", "name": "Morder Rock Double 10" }, "69": { "product_id": "61", "category_id": "109", "name": "Mordern Single Cutaway 12" }, "71": { "product_id": "62", "category_id": "109", "name": "Mordern Single Cutaway 13" } } }; var itemslist = ''; var product_Data =''; itemslist += '<div class="item active"><div class="container"><div class="row">'; // Create index counter var i = 1; $.each(proJSON.pro, function (lkey, lvalue) { product_Data += '<div class="col-md-3">\\n' + lvalue.name + '<img class="img-responsive" src="image/product_images/1.jpg" alt="Los Angeles" />\\n</div>'; // Check every fourth if ( i % 4 == 0) { // Close off tag (hr just for demo purposes) product_Data += '</div></div></div><hr>'; // Add starting tags again product_Data += itemslist; } // Increment index counter i += 1; }); itemslist += product_Data + '</div></div></div>'; $("#sliders").append(itemslist); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="sliders"></div>