在布局中创建新行的功能无法正常工作
Function to create new rows in layout isn't working properly
网站 运行 Joomla 有一个针对不同产品类别的模板布局。在这种情况下,我们正在查看产品类别 A 的布局。此产品类别布局应该以每行 3 个产品的网格组织产品。
PHP/Jquery 代码获取该类别的产品,然后具有将产品分配给 "subrow" 的 class 的逻辑,直到其中有 3 个产品,然后它创建下一个子行并将其分配给该子行。我不是 PHP 开发人员,所以我想听取一些意见。
问题:
- 以前这个分类下只有6个产品展示,完美的3x2网格。两个子行,每个子行三个产品。这很好。
- 添加了第 7 个产品,它创建了一个 3x3 网格,第 7 个产品是第一个位置第三行中唯一的一个。这在视觉上显示正常,除了在 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])
}
});
你的代码中的问题是,当你追加新行时,那里会有一个元素,因为追加元素的函数是在之后调用的,但你在计数器 (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);
}
网站 运行 Joomla 有一个针对不同产品类别的模板布局。在这种情况下,我们正在查看产品类别 A 的布局。此产品类别布局应该以每行 3 个产品的网格组织产品。
PHP/Jquery 代码获取该类别的产品,然后具有将产品分配给 "subrow" 的 class 的逻辑,直到其中有 3 个产品,然后它创建下一个子行并将其分配给该子行。我不是 PHP 开发人员,所以我想听取一些意见。
问题:
- 以前这个分类下只有6个产品展示,完美的3x2网格。两个子行,每个子行三个产品。这很好。
- 添加了第 7 个产品,它创建了一个 3x3 网格,第 7 个产品是第一个位置第三行中唯一的一个。这在视觉上显示正常,除了在 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])
}
});
你的代码中的问题是,当你追加新行时,那里会有一个元素,因为追加元素的函数是在之后调用的,但你在计数器 (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);
}