нагрузки больше действия JQuery

Question

У меня есть Serveral статьи на моей странице

<article></articles> 

Каждая статья имеет динамический идентификатор вторит переменной 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> 

Как я могу сделать этот код работать и загружать больше статей на клике, но если какая-либо статья имеет пустой идентификатор, чтобы остаться скрытый.

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(); 
    }); 
}); 

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, вы можете заполнить только идентификаторы который должен быть показан, а затем в jQuery, вы можете изменить селектор на $('#hotel-list :not(article' + val.id + ')')