jquery-mobile - jQuery Mobile 中的网格视图

Question

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

1. 用于删除带有复选框的每个项目
2. 用于展示产品、其图像和属性
3. 用于更新数量
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>