動態自舉輪播項目

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>