javascript - 使用 jquery 设置高度

Question

我正在检查卡片包装器是否具有 ListView 类。如果是，那么我将获取梅森 div 的当前高度，当用户单击加载更多按钮时，我将在当前高度上添加 100px 并将其设置为梅森。

但问题是当我单击 .load-more 按钮时 setListHeight 函数未调用

请告诉我我做错了什么？

if ($(".cards-wrapper").hasClass("list-view")) {
    $('.load-more').on('click',setListMoreHeight);
}

function setListMoreHeight(){
    alert('called');
    var currentHeight = $('.mason').height() + 100;
    console.log(currentHeight);

    $('.mason').height(currentHeight);
    console.log(currentHeight);

}

Answer 1

您的 if 语句仅被评估一次。如果为 false，则单击事件不会被绑定(bind)，并且 if 语句永远不会再次被评估。

我会做类似这样的事情:

$('.load-more').on('click', function() {
    if ($(".cards-wrapper").hasClass("list-view")) {
        setListMoreHeight();
    }
})

function setListMoreHeight(){
    alert('called');
    var currentHeight = $('.mason').height() + 100;
    console.log(currentHeight);

    $('.mason').height(currentHeight);
    console.log(currentHeight);

}

现在，点击事件不再是有条件绑定(bind)的，而是始终有效。我们仅在满足条件时调用该函数。