带有动态内容的页面上的jQuery脚本

Question

在我的页面上，我有包含动态内容的文章。

我使用两个jQuery的脚本过滤它们

//Load more // less 
    $(document).ready(function() { 
    $('#article-list article:gt(10)').hide(); 
    $('#loadMore').click(function() { 
    $('#article-list article:hidden:lt(2)').show(); 
     }); 
    }); 
    //hide articles with no image 
    $('.myClass').each(function(){ 
     if($(this).attr('src') === ""){ 
      $(this).closest('article').hide(); 
     } 
    }); 

在第一负载没关系我看到10篇文章全部用图像。

但是，当我点击加载更多它加载2多篇文章，但我看到没有图像的文章。

我如何结合这两个代码，这样，当我点击加载更多隐藏无图像

Answer 1

你可以给没有图像的文章在一些

类和过滤器

$(document).ready(function() { 
    $('#article-list article:gt(10)').hide(); 
    $('#loadMore').click(function() { 
     $('#article-list article:not(.noimg):hidden:lt(2)').show(); 
    }); 
    //hide articles with no image 
    $('.myClass').each(function(){ 
     if($(this).attr('src') === ""){ 
     $(this).closest('article').addClass('noimg').hide(); 
     } 
    }); 
    }); 

Answer 2

你知道你需要重复使用的物品，所以写一个函数：

function hideArticlesWithNoImages(){ 
    $('.myClass').each(function(){ 
     if($(this).attr('src') === undefined || $(this).attr('src') === ''){ 
     $(this).closest('article').hide(); 
     } 
    }); 
} 

然后引用它：

$(document).ready(function() { 
    $('#article-list article:gt(10)').hide(); 
    $('#loadMore').click(function() { 
     $('#article-list article:hidden:lt(2)').show(); 
     hideArticlesWithNoImages(); 
    }); 
    hideArticlesWithNoImages(); 
});