加载更多操作 jquery - Load more action jquery

Load more action jquery

本文关键字：jquery 操作加载 | 更新日期: 2023-09-27

我的页面中有服务器文章

<article></articles>

每篇文章都有一个动态 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 保持隐藏状态。

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

你可以使用 PHP + $getJson

菲律宾比索：： 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 + ')')