jquery - 使用 Gridstack 容器调整 Div 的高度

Question

我在应用程序中使用 Gridstack.js 框架并有一些 div 列:

<div class="col-lg-6 s_panel">
<div class="cont">
<!-- 1st div content -->
</div>
</div>  

<div class="col-lg-6 s_panel">
<div class="grid-stack">
<!-- Gridstack content -->
</div>
</div>

我将第 1 个 Div 的高度设置为与 Gridstack 容器的高度相同:

$(document).ready(function () {          
     var divHeight = $('.grid-stack').css("height");
     $('.cont').css('height', divHeight);
});

因此，在加载时，两个 div 的高度相同，但如果 Gridstack div 添加了更多项目并且高度增加，我希望第一个 div 也具有相同的高度。

有没有办法动态地使第一个 div 改变高度，使其与调整后的 Gridstack div 相同？

Answer 1

如果您使用ajax调用，我建议您应该创建一个高度变化的函数，而不是像这样的$(document).ready:

var helpers = {
    heightChange() {
        var divHeight = $('.grid-stack').css("height");
        $('.cont').css('height', divHeight);
    }
};

然后在您的ajax调用中更改/将数据放入.grid-stack中，您只需要调用您的函数，完整代码例如:

 <script type="text/javascript">
    var helpers = {
        heightChange() {
            var divHeight = $('.grid-stack').css("height");
            $('.cont').css('height', divHeight);
        }
    };

    $.ajax({
        url: "test.php",
        type: "post",
        data: values ,
        success: function (response) {
            $('.grid-stack').append(response);
            //call height change here
            helpers.heightChange();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus, errorThrown);
        }
    });
</script>

希望这对您有所帮助，请随时告诉我您的其他问题。