javascript - 动态引导轮播项目

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

您需要添加一个索引来跟踪已添加的元素数量，然后关闭一个 slider 元素并打开下一个每第四个图像。

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

  i % 4 

模数 % 将第一个数字(在本例中为变量 i)除以后面的数字，并返回余数。余数。

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

// 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>