javascript - 单击排序按钮时我的项目消失了
问题描述
所以我有一个任务,我必须使用 Isotope 为品牌创建一个界面。我制作了一些过滤器按钮,它们都可以工作。但是当我想使用我的“按价格排序”或“名称”时,它们就会消失,控制台不会给出任何错误,所以我迷路了。
任何解决方案如何解决此问题?我的代码:
// init Isotope
var iso = new Isotope('.grid', {
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
symbol: '.symbol',
prijs: '.prijs',
}
});
// filter functions
var filterFns = {
// show if the size = size
numberGreaterThan50: function(itemElem) {
var size = itemElem.querySelector('.name').textContent;
return parseInt() === Regular;
},
};
// bind filter button click
var filtersElem = document.querySelector('.filters-button-group');
filtersElem.addEventListener('click', function(event) {
// only work with buttons
if (!matchesSelector(event.target, 'button')) {
return;
}
var filterValue = event.target.getAttribute('data-filter');
// use matching filter function
filterValue = filterFns[filterValue] || filterValue;
iso.arrange({
filter: filterValue
});
});
// change is-checked class on buttons
var buttonGroups = document.querySelectorAll('.button-group');
for (var i = 0, len = buttonGroups.length; i < len; i++) {
var buttonGroup = buttonGroups[i];
radioButtonGroup(buttonGroup);
}
function radioButtonGroup(buttonGroup) {
buttonGroup.addEventListener('click', function(event) {
// only work with buttons
if (!matchesSelector(event.target, 'button')) {
return;
}
buttonGroup.querySelector('.is-checked').classList.remove('is-checked');
event.target.classList.add('is-checked');
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<header>
<img src="http://logok.org/wp-content/uploads/2015/02/Dominos-pizza-logo-old.png" width="220px" height="160px">
<h1>Dominos Pizza</h1>
</header>
<div class="container">
<div class="button-group filters-button-group" id="strook">
<button class="button is-checked" data-filter="*">show all products</button>
<button class="button" data-filter=".regular">regular</button>
<button class="button" data-filter=".medium">medium</button>
<button class="button" data-filter=".large">large</button>
<button class="button" data-filter=".side-orders">side-orders</button>
<button class="button" data-filter=".drinks">drinks</button>
<button class="button" data-filter=".symbol">name</button>
<button class="button" data-filter=".price">price</button>
</div>
<div class="grid">
<div class="element-item regular pizza " data-category="regular">
<h3 class="name">Regular</h3>
<h4 class="symbol">BBQ Chicken</h4>
<p class="prijs">€11</p>
</div>
<div class="element-item regular pizza" data-category="regular">
<h3 class="name">Regular</h3>
<h4 class="symbol">Forestière</h4>
<p class="prijs">€9</p>
</div>
<div class="element-item regular pizza " data-category="regular">
<h3 class="name">Regular</h3>
<h4 class="symbol">Cannibale</h4>
<p class="prijs">€11</p>
</div>
<div class="element-item regular pizza " data-category="regular">
<h3 class="name">Regular</h3>
<h4 class="symbol">Hot & Spicy</h4>
<p class="prijs">€11</p>
</div>
<div class="element-item regular pizza " data-category="regular">
<h3 class="name">Regular</h3>
<h4 class="symbol">4 Stagioni</h4>
<p class="prijs">€10</p>
</div>
<div class="element-item regular pizza " data-category="regular">
<h3 class="name">Regular</h3>
<h4 class="symbol">American</h4>
<p class="prijs">€9</p>
</div>
<div class="element-item medium pizza " data-category="medium">
<h3 class="name">Medium</h3>
<h4 class="symbol">Gyros</h4>
<p class="prijs">€12</p>
</div>
<div class="element-item medium pizza " data-category="medium">
<h3 class="name">Medium</h3>
<h4 class="symbol">Extravaganzza</h4>
<p class="prijs">€13</p>
</div>
<div class="element-item medium pizza " data-category="medium">
<h3 class="name">Medium</h3>
<h4 class="symbol">Spicy Chicken</h4>
<p class="prijs">€13</p>
</div>
<div class="element-item medium pizza " data-category="medium">
<h3 class="name">Medium</h3>
<h4 class="symbol">Diabolika</h4>
<p class="prijs">€12</p>
</div>
<div class="element-item medium pizza " data-category="medium">
<h3 class="name">Medium</h3>
<h4 class="symbol">Veggi</h4>
<p class="prijs">€12</p>
</div>
<div class="element-item medium pizza " data-category="medium">
<h3 class="name">Medium</h3>
<h4 class="symbol">Margherita</h4>
<p class="prijs">€11</p>
</div>
<div class="element-item large pizza " data-category="large">
<h3 class="name">Large</h3>
<h4 class="symbol">Beef Fanatica</h4>
<p class="prijs">€17</p>
</div>
<div class="element-item large pizza " data-category="large">
<h3 class="name">Large</h3>
<h4 class="symbol">Chicken Kebab</h4>
<p class="prijs">€17</p>
</div>
<div class="element-item large pizza " data-category="large">
<h3 class="name">Large</h3>
<h4 class="symbol">Tonno</h4>
<p class="prijs">€17</p>
</div>
<div class="element-item large pizza " data-category="large">
<h3 class="name">Large</h3>
<h4 class="symbol">Garnalen</h4>
<p class="prijs">€17</p>
</div>
<div class="element-item large pizza " data-category="large">
<h3 class="name">Large</h3>
<h4 class="symbol">4 Cheese</h4>
<p class="prijs">€16</p>
</div>
<div class="element-item large pizza " data-category="large">
<h3 class="name">Large</h3>
<h4 class="symbol">Hawaiian</h4>
<p class="prijs">€14</p>
</div>
<div class="element-item side-orders " data-category="side-orders">
<h3 class="name">Side-order</h3>
<h4 class="symbol">Popcorn Chicken</h4>
<p class="prijs">€5</p>
</div>
<div class="element-item side-orders " data-category="side-order">
<h3 class="name">Side-order</h3>
<h4 class="symbol">Cheesy Bread</h4>
<p class="prijs">€4</p>
</div>
<div class="element-item side-orders " data-category="side-order">
<h3 class="name">Side-order</h3>
<h4 class="symbol">Buffalo Wings</h4>
<p class="prijs">€5</p>
</div>
<div class="element-item side-orders " data-category="side-order">
<h3 class="name">Side-order</h3>
<h4 class="symbol">Potatoe Wedges</h4>
<p class="prijs">€3,50</p>
</div>
<div class="element-item drinks " data-category="drinks">
<h3 class="name">Drinks</h3>
<h4 class="symbol">33 Cl Coca-Cola</h4>
<p class="prijs">€1,50</p>
</div>
<div class="element-item drinks " data-category="drinks">
<h3 class="name">Drinks</h3>
<h4 class="symbol">33 Cl Coca-Cola Light</h4>
<p class="prijs">€1,50</p>
</div>
<div class="element-item drinks " data-category="drinks">
<h3 class="name">Drinks</h3>
<h4 class="symbol">33 Cl Coca-Cola Zero</h4>
<p class="prijs">€1,50</p>
</div>
<div class="element-item drinks " data-category="drinks">
<h3 class="name">Drinks</h3>
<h4 class="symbol">33 Cl Fanta</h4>
<p class="prijs">€1,50</p>
</div>
<div class="element-item drinks " data-category="drinks">
<h3 class="name">Drinks</h3>
<h4 class="symbol">33 Cl Lipton Ice-Tea</h4>
<p class="prijs">€1,50</p>
</div>
<div class="element-item drinks " data-category="drinks">
<h3 class="name">Drinks</h3>
<h4 class="symbol">33 Cl Sprite</h4>
<p class="prijs">€1,50</p>
</div>
<div class="element-item drinks " data-category="drinks">
<h3 class="name">Drinks</h3>
<h4 class="symbol">50 Cl Spa Reine</h4>
<p class="prijs">€1,60</p>
</div>
<div class="element-item drinks " data-category="drinks">
<h3 class="name">Drinks</h3>
<h4 class="symbol">33 Cl Jupiler Beer</h4>
<p class="prijs">€1,70</p>
</div>
</div>
</div>
<div class="photo"></div>
解决方案
推荐阅读
- node.js - 基于环境的角度应用展示模块
- c# - 如何在 C# 中以结构化方式访问 SqlDbType 的 Sql 参数的列和数据?
- python - 我做了一个井字游戏,但当有人获胜时显示错误的玩家
- javascript - Val(" ") 不从文本框中删除文本
- javascript - 如何获取回调函数的值
- openapi - 如何以编程方式创建 openapi.json
- xamarin.forms - 将 JWT 令牌作为 Xamarin WebView 中的标头传递
- python - Python - 在 3D 样条曲线上找到最接近 3D 点的点
- node.js - 生产中 socket.io 的 CORS 问题(MEAN 堆栈)
- ios - 有没有办法让应用程序通知在 iOS 中持久存在?