Question

我看了很多与此有关的问题，但找不到答案。很抱歉，这是基本的东西，但是我仍在学习JS。

我正在解析要提取到卡上的json数据（连续3张卡），问题是.each循环未保存循环内vas增大（3倍增量）的索引值。没有任何方法可以存储索引值，以使其最终状态在循环中再次使用。.

代码：

。每个循环都缩短了卡片代码，

  $.each(weekno.slice(), function(i, data) {
      var ul_data = [
         '<div class="container">'+
            '<div class="flex-container">'+
              '<div class="card">'+
                    '<div class="card-image" style="background-image: url(https://picsum.photos/600/100)"></div>'+
                         '<div class="card-content">'+
            '<p>Week '+ weekno[i] +'</p>'+
            '<p>Week '+ content[i] +'</p>'+

                        '</div>'+
                    '</div>'+
                  '</div>'+

             '<div class="card">'+
                    '<div class="card-image" style="background-image: url(https://picsum.photos/600/100)"></div>'+
                         '<div class="card-content">'+
             '<p>Week '+ weekno[i+1] +'</p>'+
                '<p>Week '+ content[i+1] +'</p>'+

                        '</div>'+
                    '</div>'+
                  '</div>'+              

             '<div class="card">'+
                    '<div class="card-image" style="background-image: url(https://picsum.photos/600/100)"></div>'+
                         '<div class="card-content">'+
            '<p>Week '+ weekno[i+2] +'</p>'+
              '<p>Week '+ content[i+2] +'</p>'+
                         '</div>'+
                    '</div>'+
                  '</div>'+
              '</div>'
            '</div>'+];
$("#recentActivities").append(ul_data);

该循环正确显示了前三张牌：

Card 1: Week No. 1,  Content 1 
Card 2: Week No. 2,  Content 2 
Card 3: Week No. 3, Content 3

但是然后开始重复：

Card 4: Week No. 2, Content 2 
Card 5: Week No. 3, Content 3 
Card 6: Week No. 4, Content 4

Answer 1

我建议您看看Handlebars，这非常适合您的情况。

第一步，定义一个html模板，稍后将其与json对象结合以生成最终的html卡。HTML模板可以放置在index.html中。

HTML模板

    <script type="text/x-handlebars-template" id="card-template">
         {{#each data}} <!--Defines a loop throw the data passed into the template -->
          <div class="card">
              <div class="card-image" style="background-image: url(https://picsum.photos/600/100)"></div>
              <div class="card-content">
                <p>Week {{data.weekno}}</p> <!--Read the weeekno from the passed data-->
                <p>Week {{data.content}}</p><!--Same as above read the content-->
              </div>
          </div>
        {{/each}} <!--Close loop-->
    </script>

index.html

    <div class="container">
      <div class="flex-container" id="content-placeholder">
      </div>
    </div>

    <script>
        var source = $("#card-template").html();
        var template = Handlebars.compile(source);
        var data = {
          "data" : [
            { weekno: 1, content: 'Week 1' },
            { weekno: 1, content: 'Week 1' },
            { weekno: 1, content: 'Week 1' }
          ]
        };
        var html = template(data);
        $("#content-placeholder").html(html);
    </script>

我不知道您使用的是Bootstrap还是Materilze之类的框架。因为这是您查看他们的Grid-system

的另一种选择

Answer 2

这是问题所在：

您不必要重复了card元素。也就是说，您要在每个容器中放入 3 张卡片。这就是为什么您需要额外的卡片的原因。

您必须只关注循环中的第一轮比赛，这可能就是您放置i，i+1和i+2的原因。

解决方案：

从card中删除多余的ul_data元素。

找出一种使用CSS在同一行中包含3张卡片的方法。您可能可以使用
CSS Grid System。

顺便提一下Loops上的知识。

希望这个答案有所帮助！

在.each循环jquery中多次增加索引值

2 个答案: