Question

我想在超过3时隐藏ul li项目，并显示“查看更多”按钮以展开并显示更多li项目。我正在使用以下jquery代码，它与静态内容一起正常工作，但是当使用ajax动态加载内容时则不行。

$(document).ready(function () {

    $('ul.categorylist').each(function () {  
  $(this).find('li').filter(':gt(2)').filter("li[class!='More']").slideToggle(500);
        if (($(this).children().size()) > 4) {
            $(this).append('<li class="More"><a href="Javascript:void(0);">View More...</a></li>').find('li:last').click(function () {            $(this).parent().children().filter(':gt(3)').filter("li[class!='More']").slideToggle(800);
                if ($(this)[0].innerHTML.indexOf("View More...") == -1)
                    $(this)[0].innerHTML = $(this)[0].innerHTML.replace("View Less...", "View More...");
                else
                    $(this)[0].innerHTML = $(this)[0].innerHTML.replace("View More...", "View Less...");
            });
        }
    });
});

这是我正在使用的angularjs控制器

  .controller('SubCategoriesCtrl', ['$scope', '$routeParams', '$filter', '$rootScope', '$http', '$location', 'SubCategories', function ($scope, $routeParams, $filter, $rootScope, $http, $location, SubCategories) {

        var cat1 = "";
        var cat2 = "";
        var url = window.location.pathname.split('/');
        for(var i=0; i<url.length; i++) {
            if(url[i].length > 0)
            {
                if(i==1)
                    cat1 = url[i];
                if(i==2)
                    cat2 = url[i];
            }
        }
        if(cat1 != "aboutus" && cat1 != "contactus" && cat1 != "termsofuse" && cat1 != "privacypolicy" && cat1 != "sitemap") {
            SubCategories.customGETLIST("", {"query": cat1}).then(function(subcategories) {
                fixLiElements();
                $scope.subcategories = subcategories;

                //console.log($scope.subcategories);
            }, function(error) {
                console.log("we had an error here while loading sub categories.." + error);
            });
        }

  }])

这就是我在页面中调用它的方式

    <div ng-repeat="c in subcategories | filter:{ categorylevel: 1 }" class="category-list-container">
        <ul ng-repeat="cat in subcategories | filter:{ categorylevel: 2 } | orderBy:'name'" class="catlist">
            <h3 class="CatPCat2Name">[[cat.name]]</h3>

                <li ng-repeat="catt in subcategories | filter:{ parentcategoryid: cat.id} | filter:{ categorylevel: 3 } | orderBy:'name'">
                    <a ng-href="/[[c.slug]]/[[cat.slug]]/[[catt.slug]]">[[catt.name]]</a>
                </li>
                <li ng-repeat="catt in subcategories | filter:{ parentcategoryid: cat.id} | filter:{ categorylevel: 4 } | orderBy:'name'">
                    <a ng-href="/[[c.slug]]/[[cat.slug]]/[[catt.slug]]">[[catt.name]]</a>
                </li>


        </ul>
    </div>

我已经尝试过使用ajaxStop（）并在ajax成功时调用它，但失败了。

请在我做错的地方帮忙，我应该在哪里使用这个jquery脚本？

Answer 1

当使用jQuery动态加载内容时，它们不会绑定到ul li项目。因此，您的代码不适用于使用jQuery加载的内容。要实现这一点，您需要使用jQuery的ajaxStop()事件，以防使用ajax加载内容。

e.g。

function yourfunction(){
    $('ul.categorylist').each(function () {  
          $(this).find('li').filter(':gt(2)').filter("li[class!='More']").slideToggle(500);
            if (($(this).children().size()) > 4) {
                $(this).append('<li class="More"><a href="Javascript:void(0);">View More...</a></li>').find('li:last').click(function () {            $(this).parent().children().filter(':gt(3)').filter("li[class!='More']").slideToggle(800);
                    if ($(this)[0].innerHTML.indexOf("View More...") == -1)
                        $(this)[0].innerHTML = $(this)[0].innerHTML.replace("View Less...", "View More...");
                    else
                        $(this)[0].innerHTML = $(this)[0].innerHTML.replace("View More...", "View Less...");
                });
            }
        });
    }
}

//call ready event to bind for the content when is loaded
$(document).ready(function() {yourfunction(); });

//call ajaxStop event to bind for the content when ajax call is made
$(document).ajaxStop(function() {yourfunction(); });

Answer 2

我假设li元素尚未加载ajax内容，因此该函数可能会过早触发。尝试将所有代码放在一个命名函数内的文档就绪函数中，并在文档就绪和ajax成功时调用它。

function fixLiElements(){
  $('ul.categorylist').each(function () { ... }
}

$(document).ready(fixLiElements);

//inside ajax object, after elements are added to DOM.
success : fixLiElements()

Jquery在第n个项目后显示隐藏列表项目，不使用ajax加载的内容

2 个答案: