2

我想要一个可以动态更新的过滤器：

我在外部脚本文件中使用了同位素 javascript：

    var $container = $('.isotope');
    // initialize isotope
    $container.isotope({
      // options...
    });

    // filter items when filter link is clicked
    $('.filter a').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: selector });
      $('.filter a.active').removeClass('active');
      $(this).addClass('active');
      return false;
    });

我的过滤器链接：

<ul class="filter clearfix" id="filterContainer">
    <li><a href="#" class="active" data-filter="*">All</a></li>
</ul>

第一个链接“全部”有效，但是当我尝试使用 ajax 向其中添加更多链接时出现问题：

    function getFilterHtml() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/getFilterHtml",
            data: "{}",
            contentType: "application/json",
            dataType: "json",
            success: function (msg) {
                // Replace the div's content with the page method's return.
                //$("#filterContainer").html(msg.d);  
                var $newItems = $(msg.d);
                $('#filterContainer').append($newItems).isotope('addItems', $newItems).isotope('reLayout', callback).isotope('reloadItems');
            }
        });
    }

回调之后是这个样子。除了点击电话部门时，它会将我带到页面顶部“

    <ul id="filterContainer" class="filter clearfix">
        <li>
            <a class="active" data-filter="*" href="#">All</a>
        </li>
        <li>
            <a data-filter=".PhoneDepartment" href="#">Phone Department</a>
        </li>
    </ul>
4

1 回答 1

2

我用这段代码做了同样的事情：

   $('#filterContainer').append($newItems).isotope('insert', $newItems);

没有 reLayout/reloadItems

于 2013-07-22T12:25:09.907 回答