演示

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>

动态自举轮播项目

1 个答案:

演示