Javascript 动态引导转盘项目

如何循环和创建动态引导转盘项目

这就是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>';

var itemslist=''；
var乘积_数据=“”；
itemslist+=“”
$.each（nvalue.pro，函数（lkey，左值）{
产品数据+='\n\
“+lvalue.name+”\n\
';
});
itemslist+=产品数据+“”；

我需要这样：

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

莫德摇滚双3
莫德摇滚双5
莫德摇滚双8
莫德摇滚双10
现代单切口12
现代单切口13

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

我在下面的代码中添加了一个变量

I

，并使用模数检查它是否是4的倍数，以识别何时执行此操作

  i % 4 

模数

%

将第一个数字（在本例中为变量

i

）除以以下数字，并返回余数

然后，您可以在

if

语句中使用它，就像变量的模没有余数一样，那么它正好可以被四整除，因此必须是四的倍数

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

   ...

}

---

演示 注意：我添加了更多的JSON数据，以证明该代码继续适用于大型数据集

var proJSON={
“专业”：{
"52": {
“产品标识”：“52”，
“类别识别号”：“109”，
“名称”：“Morder Rock Double 3”
},
"54": {
“产品id”：“54”，
“类别识别号”：“109”，
“名称”：“Morder Rock Double 5”
},
"57": {
“产品id”：“57”，
“类别识别号”：“109”，
“名称”：“Morder Rock Double 8”
},
"59": {
“产品id”：“59”，
“类别识别号”：“109”，
“名称”：“Morder Rock Double 10”
},
"61": {
“产品id”：“61”，
“类别识别号”：“109”，
“名称”：“现代单切口12”
},
"62": {
“产品id”：“62”，
“类别识别号”：“109”，
“名称”：“现代单切口13”
},
"67": {
“产品id”：“57”，
“类别识别号”：“109”，
“名称”：“Morder Rock Double 8”
},
"68": {
“产品id”：“59”，
“类别识别号”：“109”，
“名称”：“Morder Rock Double 10”
},
"69": {
“产品id”：“61”，
“类别识别号”：“109”，
“名称”：“现代单切口12”
},
"71": {
“产品id”：“62”，
“类别识别号”：“109”，
“名称”：“现代单切口13”
}
}
};
var itemslist=''；
var乘积_数据=“”；
itemslist+=''；
//创建索引计数器
var i=1；
$.each（proJSON.pro，函数（lkey，左值）{
product_Data+='\n'+左值.name+'\n'；
//每四分钟检查一次
如果（i%4==0）{
//关闭标签（hr仅用于演示）
产品数据+=“
”；
//再次添加起始标记
产品数据+=项目列表；
}
//增量索引计数器
i+=1；
});
itemslist+=产品数据+“”；
$（“#滑块”）.append（itemslist）

您的代码或多或少做了它应该做的事情：到底是什么问题？你是在问如何创建四人一组吗？@Chris G我需要引导转盘，每张幻灯片4张图像。