我的代码工作正常，但是我想从过滤器中删除“全部”选项，并默认发送另一个。
HTML / PHP
<section class="gallery ptb150">
<div class="container-fluid">
<div class="row">
<div class="full-tpl each-element">
<div class="grid-wrapper">
<div class="filter_container text-center">
<div class="filter-item active" data-filter="all">
All
</div>
<div class="filter-item" data-filter="Action">
Action
</div>
<div class="filter-item" data-filter="arcade">
Arcade
</div>
<div class="filter-item" data-filter="Casual">
Casual
</div>
<div class="filter-item" data-filter="Card">
Board
</div>
<div class="filter-item" data-filter="Puzzle">
Puzzle
</div>
<div class="filter-item" data-filter="sports">
Sports
</div>
</div>
<div id= "data" class="item_container relative mt40">
<?php
$url = 'https://example.com/cms/api/index.php?id=1';
$data = file_get_contents($url);
$characters = json_decode($data, true);
foreach($characters['gameslist'] as $key) {
if($key['featured']==0)
{
?>
<div class="item <?PHP echo $key['genre']; ?> col-lg-3 col-md-3 col-sm-3 col-xs-12">
<a href="<?PHP echo "game.php?id=".$key['id']; ?>" target="_blank" class="item-content">
<div class="image-bl">
<img src="<?PHP echo $characters['baseurlthumbnailbanner'].$key['bannericon']; ?>" alt="">
</div>
<div class="bottom-info text-center p30">
<div class="category fsize-14 fweight-700 uppercase">
<?PHP echo ucfirst($key['genre']); ?>
</div>
<div class="img-name">
<h5 data-trim="40">
<?PHP echo $key['name']; ?>
</h5>
</div>
</div>
</a>
</div>
<?PHP
}
else{
//echo "no game";
}
}
?>
</div>
<div id="username">
</div>
</div>
</div>
</div>
<div id="" style="color:red"></div>
</section>
script
$( '.gallery' ).on( 'click', '.filter_container > div', function()
{
$( '.filter_container > div' ).removeClass( 'active' );
$( this ).addClass( 'active' );
} );
if( $( '.item_container' ).length )
{
var itemGrid = new Muuri( '.item_container', {
showDuration: 200,
hideDuration: 100,
showEasing: 'ease-out',
layout: {
rounding: false
}
} );
$( '.filter_container .filter-item' ).on( 'click', function()
{
var filterClass = $( this ).data( 'filter' );
if( filterClass === 'all' )
{
itemGrid.filter( '.item' );
}
else
{
itemGrid.filter( '.' + filterClass );
}
} );
}
} );
在页面加载中，我不想获取所有数据，在第一页加载时仅加载一个类别，而在单击时则不加载其他类别，这就是我为此寻找解决方案的原因。尝试了isotop，但对我不起作用。
答案 0 :(得分：0)
解决添加按钮以及一些其他CSS和脚本的问题
CSS
<style>
.filterDiv {
display: none;
}
.show {
display: block;
}
.container {
overflow: hidden;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #000;
color: #000;
}
</style>
脚本
filterSelection("Action")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "Action") c = "Action";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
HTML
<div class="filter_container text-center" id="myBtnContainer">
<!-- <div class="filter-item active" data-filter="all">
All
</div> -->
<button class="btn active gradient mt30 color-white color-
white plr50 ptb19" onclick="filterSelection('Action')">
Action</button>
<button class="btn gradient mt30 color-white color-white
plr50 ptb19" onclick="filterSelection('arcade')">
Arcade</button>
<button class="btn gradient mt30 color-white color-white
plr50 ptb19" onclick="filterSelection('Casual')">
Casual</button>
<button class="btn gradient mt30 color-white color-white
plr50 ptb19" onclick="filterSelection('Card')">
Board</button>
<button class="btn gradient mt30 color-white color-white
plr50 ptb19"
onclick="filterSelection('Puzzle')">Puzzle</button>
<button class="btn gradient mt30 color-white color-white
plr50 ptb19"
onclick="filterSelection('sports')">Sports</button>
</div>
<div class="container-fluid" style="margin-top: 20px;">
<?php
//print_r($_SESSION);
$url = 'https://viyugames.com/cms/api/index.php?id=1';
$data = file_get_contents($url);
$characters = json_decode($data, true);
foreach($characters['gameslist'] as $key) {
if($key['featured']==='0')
{
/*if ($key['genre']==='Action') {*/
# code...
?>
<div id="div1" class="filterDiv <?PHP echo $key['genre'];
?> col-lg-3 col-md-3 col-sm-3 col-xs-12">
<a href="<?PHP echo "game.php?id=".$key['id']; ?>"
target="_blank" class="item-content">
<div class="image-bl">
<img src="<?PHP echo
$characters['baseurlthumbnailbanner'].$key['bannericon']; ?>" alt="">
</div>
<div class="bottom-info text-center p30">
<div class="category fsize-14 fweight-700
uppercase">
<?PHP echo ucfirst($key['genre']); ?>
</div>
<div class="img-name">
<h5 data-trim="40">
<?PHP echo $key['name']; ?>
</h5>
</div>
</div>
</a>
</div>
<?PHP
/*}*/
}
else{
//echo "no game";
}
}
?>
</div>
我正在发布完整的代码，以使新人们更好地理解它，我希望它对某些人有用。谢谢。