Question

运行Joomla的网站具有特定于不同产品类别的模板布局。在这种情况下，我们正在查看产品类别A的布局。该产品类别布局应按每行3个产品的网格组织产品。

PHP / Jquery代码获取该类别的产品，然后具有将产品分配给“ subrow”类的逻辑，直到其中有3个产品，然后它将创建下一个子行并将其分配给该子行。我不是PHP开发人员，所以我想获得一些意见。

问题：

在此类别下，过去仅显示6种产品，它们构成了完美的3x2网格。两个子行，每个子行中有三个乘积。很好
添加了第七个产品，它创建了一个3x3的网格，第七个产品是第一行中第三行中唯一的产品。这样可以直观地显示出来，除了在HTML代码中，它显示了两个子行，第二个子行中显示了四个乘积。应该是三个子行，第三个子行中有一个乘积。
添加了第8个产品，它创建了一个3x4的网格，第8个产品是第一个位置第四行中的唯一产品。在HTML代码中，它显示了三个子行，第二个子行中有四个乘积，第三个子行中有一个乘积。这个不好。它应该已经添加到第三行的第二个位置。

以下是添加了第8个产品的HTML：

以下是此逻辑的PHP / Jquery代码。 有人看到任何明显的问题会导致其不遵循每行3个产品的方式吗？

callAPI("productlines/by/subcategory")
    .done(function(data) {
        var moulding = data['Product Category A']

        var maxPerRow = 3;
        var matMap = {};

        for (var i=0; i < moulding.length; i++) {
            if(i%2===0) {
                jQuery('<div/>')
                    .addClass('material-row-'+i)
            }

            var matgroup = jQuery('.material-rows');
            var subrow = matgroup.children(".subrow").last();
            if(subrow.length == 0) { subrow = jQuery("<div/>").addClass("subrow").attr("data-row",0).appendTo(matgroup); }

            if(!matMap[0]) matMap[0] = 0;
            if(++matMap[0] > maxPerRow){
                // console.log("subrow",subrow[0],"is full! making new row");
                subrow = jQuery("<div/>").addClass("subrow").appendTo(matgroup).attr("data-row",1+parseInt(subrow.attr("data-row")));
                matMap[0]=0;
            }

            popProducts(moulding[i],subrow[0])
        }

});

Answer 1

您的代码中的问题是，当您添加新行时，将在其中添加一个元素，因为添加元素的函数在调用之后被调用，但是您在计数器（matMap）中设置了0个元素，但是应该为1（matMap[0] = 1;）

if(++matMap[0] > maxPerRow){
  // console.log("subrow",subrow[0],"is full! making new row");
  subrow = jQuery("<div/>").addClass("subrow").appendTo(matgroup).attr("data-row",1+parseInt(subrow.attr("data-row")));
  matMap[0]=1;
}

简单的例子：

var moulding = [1, 2, 3, 4, 5, 6, 7, 8];

var maxPerRow = 3;
var matMap = {};

for (var i = 0; i < moulding.length; i++) {
  if (i % 2 === 0) {
    jQuery('<div/>')
      .addClass('material-row-' + i)
  }

  var matgroup = jQuery('.material-rows');
  var subrow = matgroup.children(".subrow").last();
  if (subrow.length == 0) {
    subrow = jQuery("<div/>").addClass("subrow").attr("data-row", 0).appendTo(matgroup);
  }

  if (!matMap[0]) matMap[0] = 0;
  if (++matMap[0] > maxPerRow) {
    // console.log("subrow",subrow[0],"is full! making new row");
    subrow = jQuery("<div/>").addClass("subrow").appendTo(matgroup).attr("data-row", 1 + parseInt(subrow.attr("data-row")));
    matMap[0] = 1;
  }

  jQuery("<div/>").append("Element: " + moulding[i]).addClass("moulding-col").appendTo(subrow[0]);
  // popProducts(moulding[i],subrow[0])
}

.subrow {
  display: flex;
}

.moulding-col {
  margin: 5px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="material-rows" />

与您的问题无关，但是代码非常丑陋，您应该考虑对其进行改进。我会稍微改善您的功能，以便您可以检查更好的做法（使用let，const，不要在DOM中搜索您已经拥有的元素（例如，table），使用更多描述性变量等。）。

const moulding = [1, 2, 3, 4, 5, 6, 7, 8];

const maxItemsPerRow = 3;
const table = $('.material-rows');

for (let i = 0; i < moulding.length; i++) {
  let row = table.children(".subrow").last();
  if (!(i % maxItemsPerRow)) {
    row = $("<div/>").addClass("subrow").attr("data-row", parseInt(i / maxItemsPerRow)).appendTo(table);
  }

  $("<div/>").append("Element: " + moulding[i]).addClass("moulding-col").appendTo(row);

}

在布局中创建新行的功能无法正常工作

1 个答案: