javascript - 加载更多 Action jQuery

我的页面中有服务器文章

<article></articles>

每篇文章都有一个动态ID，该ID由PHP变量data-price="<?php echo $pret[1] ?>"回显。

加载更多按钮是：

<div id="loadMore"><a> mai multe rezultate</a></div></div>

代码是：

<script type="text/javascript">
$(document).ready(function () {
    $('#hotel-list article:gt(4)').hide();
    $('#loadMore').click(function () {
        $('#hotel-list article:hidden:lt(2)').show();
    });
    $('#showLess').click(function () {
        $('#hotel-list article').not(':lt(4)').hide();
    });
});
</script>

如何使此代码正常工作并在单击时加载更多文章，但是如果有任何文章具有空白ID，则将其隐藏。

最佳答案

试试这个脚本。 Here是JSFiddle。在此示例中，当单击“加载更多”时，第7条和第9条被隐藏了，因为data-price为空（尽管我不确定为什么将ID存储在名为data-price的属性中）。

 $(document).ready(function () {
     $('#hotel-list article:gt(4)').hide();
     $('#loadMore').click(function () {
         $('article').filter(function () {
             return $(this).data('price') != '' && $(this).css("display") == "none"
         }).show();
     });
     $('#showLess').click(function () {
         $('#hotel-list article').not(':lt(4)').hide();
     });
 });