Question

这里有点问题。我需要在网站首次加载时隐藏一堆项目，并且只有在我单击按钮后才会显示。在我的doc.ready的顶部，我有这个：

$('#showall').hide();

成功隐藏了我需要隐藏的卡片（显然）。然后我试图取消隐藏它们并重新加载砌筑容器，但它似乎没有工作..

var container = document.querySelector('.comparison-cards');
var msnry = new Masonry(container, {
    // options
    itemSelector: '.card',
    gutter: 20,
    isFitWidth: true
});

$('.button').click(function () {
    $('#showall').show();
    msnry.reloadItems();
});

有什么理由说这不起作用？难道我做错了什么？有一个更好的方法吗？为了澄清，我隐藏的卡片与我最初只显示不同ID的卡片具有相同的等级。

感谢您提供的任何帮助！： - ）

Answer 1

我设法通过使用jquery show（）和hide（）以及masonry remove（）和addItems（）来解决这个问题：

    $('.button').click(function () {

    if (buttonClicked == false) {
        $(testArray).show();
        msnry.addItems(testArray);
        $(container).append(testArray);
        msnry.appended(testArray);
        msnry.reloadItems();
        msnry.layout();
        $('.button').html('SHOW LESS');
        buttonClicked = true;
        console.log(buttonClicked);
    } else {
        msnry.remove(testArray);
        msnry.layout();
        $('.button').html('SHOW ALL');
        buttonClicked = false;
        console.log(buttonClicked);
    }

});

显示新项目后重新加载砌体容器不起作用？

1 个答案: