我的页面中有服务器文章
<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 + ')')