Kategorilere göre "nasıl daha fazla yükleme yapabilirim" verileri

Question

Soru şu: daha fazla veriyi yalnızca kategorilere göre nasıl yükleyebilirim? Örneğin, elde ettiğim sonucu 2 numarayı seçiyorum, daha fazla veri yüklemem gerekiyor, sadece 2 numaralı filtre için. Thanx önceden.

html -

number: 
<select class="filterby"> 
    <option value="all">all</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

type: 
<select class="filterby"> 
    <option value="all">all</option> 
    <option value="plastic">plastic</option> 
    <option value="metal">metal</option> 
</select> 

<br> 

<div id="filter-content"> 

    <div class="all 1 plastic">1 plastic</div> 
    <div class="all 1 metal">1 metal</div> 
    <div class="all 2 plastic">2 plastic</div> 
    <div class="all 2 metal">2 metal</div> 
    <div class="all 3 plastic">3 plastic</div> 
    <div class="all 3 metal">3 metal</div> 

</div> 

<br> 

<div id="load-more">Load more</div> 

js burada

$("select.filterby").change(function() { 
    var filters = $.map($("select.filterby").toArray(), function(e) { 
     return $(e).val(); 
     }).join("."); 
     $("div#filter-content").find("div").hide(); 
     $("div#filter-content").find("div." + filters).show(); 
    }); 


    size = $("#filter-content div").size(); 
    x = 3; 
    $('#filter-content div:lt(' + x + ')').show(); 
    $('#load-more').click(function() { 
     x = (x + 1 <= size) ? x + 1 : size; 
     $('#filter-content div:lt(' + x + ')').show(); 
     if (x == size) { 
     $('#load-more').hide(); 
     } 
    }); 

jsfiddle demo: https://jsfiddle.net/mrdoe/7smz31ad/

Answer 1

#load-moreclick işleyicisi seçicinin parçası olarak filters kullanılarak filters dışında işleyicisi change belirleyici deneyin

var filters = "all", size = $(".all").length, x = 3; 
 
$("select.filterby").change(function() { 
 
    x = 3; 
 
    filters = $.map($("select.filterby").toArray(), function(e) { 
 
    return $(e).val(); 
 
    }).join("."); 
 
    $("div#filter-content div").hide(); 
 
    $("div#filter-content div." + filters + ":lt("+x+")").show(); 
 
    size = $("#filter-content div." + filters).length; 
 
    $("#load-more").show() 
 
}); 
 

 
$("#filter-content div:lt(" + x + ")").show(); 
 
$("#load-more").click(function() { 
 
    x = (x + 1 <= size) ? x + 1 : size; 
 
    $("#filter-content div." + filters + ":lt(" + x + ")") 
 
    .show(250, function() { 
 
     if (x == size) { 
 
     $("#load-more").hide(250); 
 
     x = 3; 
 
     } 
 
    }) 
 
});

#filter-content div { 
 
    display: none; 
 
} 
 
#load-more { 
 
    color: red; 
 
    cursor: pointer; 
 
} 
 
#load-more:hover { 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
name: 
 
<select class="filterby"> 
 
    <option value="all">all</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 

 
type: 
 
<select class="filterby"> 
 
    <option value="all">all</option> 
 
    <option value="plastic">plastic</option> 
 
    <option value="metal">metal</option> 
 
    <option value="glass">glass</option> 
 
</select> 
 

 
<br> 
 

 
<div id="filter-content"> 
 

 
    <div class="all 1 plastic">1 plastic</div> 
 
    <div class="all 1 metal">1 metal</div> 
 
    <div class="all 1 glass">1 glass</div> 
 
    <div class="all 2 plastic">2 plastic</div> 
 
    <div class="all 2 plastic">2 plastic</div> 
 
    <div class="all 2 plastic">2 plastic</div> 
 
    <div class="all 2 plastic">2 plastic</div> 
 
    <div class="all 2 plastic">2 plastic</div> 
 
    <div class="all 2 metal">2 metal</div> 
 
    <div class="all 2 metal">2 metal</div> 
 
    <div class="all 2 metal">2 metal</div> 
 
    <div class="all 2 metal">2 metal</div> 
 
    <div class="all 2 metal">2 metal</div> 
 
    <div class="all 2 metal">2 metal</div> 
 
    <div class="all 2 glass">2 glass</div> 
 
    <div class="all 3 plastic">3 plastic</div> 
 
    <div class="all 3 metal">3 metal</div> 
 
    <div class="all 3 glass">3 glass</div> 
 

 
</div> 
 

 
<br> 
 

 
<div id="load-more">Load more</div>

jsfiddle https://jsfiddle.net/7smz31ad/6/