加载更多动作jQuery

Question

我的页面中有服务器文章

<article></articles>

data-price="<?php echo $pret[1] ?>"文章都有一个动态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，则将其隐藏。

Answer 1

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

Answer 2

您可以使用PHP + $ getJson

PHP :: getid_data.php

<?php

$pret = array();

echo json_encode($pret);

?>

jQuery（$ getJSON）

$(function () {
    'use strict';    
    $.getJSON('getid_data.php', function(data) {
        $.each(data, function(key, val) {
            $('#hotel-list article' + val.id).css('display', 'none')
        });
    });
});

在PHP中，您可以仅填写应显示的ID，然后在jquery中，可以将选择器更改为$('#hotel-list :not(article' + val.id + ')')