Question

我正在尝试使用4个网格显示包含购物车项目的列表：

用于删除带有复选框的每个项目
用于显示产品，其图像和属性
用于更新数量
用于显示产品的价格。

每个网格（购物车项目）的网格高度不同。我可以为每个网格设置一个单独的高度，但这意味着如果购物车中的产品文本太多，则不会自动调整高度。

然后，当我为每个产品设置自动高度时，该行上的所有其他3个网格将不会同等增加。它只是一个混乱的页面。

是否有解决方案，以便当我将4个网格中的一个设置为自动高度时，其他3个网格将加入？

Answer 1

我找到了解决问题的方法

<script type="text/javascript" >
$(document).ready(function() {
setHeight('.col');
});

//Initialize the global variable, this will store the highest height value
var maxHeight = 0;

function setHeight(column) {
//Get all the element with class = col
column = $(column);

//Loop all the column
column.each(function() {       

    //Store the highest value
    if($(this).height() > maxHeight) {
        maxHeight = $(this).height();;
    }
});

//Set the height
column.height(maxHeight);
}
</script>

然后我将当前的类用于我的每个网格，如下所示： （注意它在第二个div中）

    <div class="ui-block-a"><div class="ui-bar ui-bar-c col"><?php echo tep_draw_checkbox_field('cart_delete[]', $products[$i]['id']); ?></div></div>

jQuery Mobile中的网格视图

1 个答案: