CODEWITHSUNDEEP
javascriptphpjqueryhtml
Razvan Baba
Razvan Baba

Reputation: 155

Load more action jquery

I have serveral articles in my page

<article></articles>

Every article has an dynamic ID echoed by a PHP variable data-price="<?php echo $pret[1] ?>".

Load more button is :

<div id="loadMore"><a> mai multe rezultate</a></div></div>

Code is:

<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>

How can I make this code working and load more articles on click, but if any articles has an empty ID to remain hidden.

Upvotes: 0

Views: 148

Answers (2)

su8898
su8898

Reputation: 1713

Try this script. Here is the JSFiddle. In this example article 7 and article 9 are hidden when clicking 'load more' because data-price is empty (I am not sure why you are storing an Id in an attribute named data-price though). 

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

Upvotes: 1

mk117
mk117

Reputation: 775

You can use 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')
        });
    });
});

In the PHP, you can fill only the ID's that should be shown, and then in jquery, you can change the selector to $('#hotel-list :not(article' + val.id + ')')

Upvotes: 0

Related Questions