javascript - 加载更多 Action jquery

Question

我的页面中有多篇文章

<article></articles>

每篇文章都有一个由 PHP 变量 data-price="<?php echo $pret[1] ?>" 响应的动态 ID .

加载更多按钮是:

<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 以保持隐藏状态。

Answer 1

尝试这个脚本。 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();
     });
 });