新手:不确定同位素过滤下一步该去哪里
Newbie: uncertain where to go next with isotope filtering
我试图将同位素过滤器编码到我的网站中:http://testerparm.b1.jcink.com/index.php?act=Pages&pid=1
不幸的是,我对处理这样的代码还很陌生,遇到了一个障碍。第一类按钮/过滤器(标记为"组")工作正常。然而,第二类和第三类按钮并没有按照我的意愿进行过滤。我会点击其中一个按钮,什么都不会发生。
以下是自定义网页的html和javascript:
<script src="http://testerparm.b1.jcink.com/uploads/testerparm/isotope_pkgd_min.js"></script>
<script src="testerparm.b1.jcink.com/uploads/testerparm/isotope_pkgd.js"></script>
<script type='text/javascript'>
$( function() {
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows'
});
// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// bind filter button click
$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
</script>
<h1>Politeia Who's Who</h1>
<h2>Groups:</h2>
<div id="filters" class="button-group">
<button class="button is-checked" data-filter="*">All</button>
<button class="button" data-filter=".staff">Staff</button>
<button class="button" data-filter=".player">Player</button>
<button class="button" data-filter=".character">Character</button>
<button class="button" data-filter=".aristocracy">Aristocracy</button>
<button class="button" data-filter=".auxiliary">Auxiliary</button>
<button class="button" data-filter=".criminal">Criminal</button>
<button class="button" data-filter=".majority">Majority</button>
<button class="button" data-filter=".police">Police</button>
</div>
<p>
<h2>Gender:</h2>
<div id="gender-filters" class="button-group">
<button class="button is-checked" data-filter="*">All</button>
<button class="button" data-filter=".female">Female</button>
<button class="button" data-filter=".male">Male</button>
<button class="button" data-filter=".nb">Non-Binary</button>
</div>
<p>
<h2>Players:</h2>
<div id="player-filters" class="button-group">
<button class="button is-checked" data-filter="*">All</button>
<button class="button" data-filter=".test1">Test1</button>
<button class="button" data-filter=".test2">Test2</button>
</div>
<p>
<div class="isotope">
<div class="element-item staff" data-category="transition">
<h3 class="name">Philosopher King</h3>
<span title="This is the staff account used for official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nMfx704.png" /></a></span>
</div>
<div class="element-item staff female test1" data-category="transition">
<h3 class="name">Test1</h3>
<span title="This is the staff account used for official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nMfx704.png" /></a></span>
</div>
<div class="element-item staff test2 female" data-category="metalloid">
<h3 class="name">Test2</h3>
<span title="This is the staff account used for official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nMfx704.png" /></a></span>
</div>
<div class="element-item character majority male test1" data-category="post-transition">
<h3 class="name">Gene Lieber</h3>
<span title="This is the staff account used for official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nMfx704.png" /></a></span>
</div>
<div class="element-item character majority male test1" data-category="post-transition">
<h3 class="name">Frank Piper</h3>
<span title="This is the staff account used for official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nMfx704.png" /></a></span>
</div>
<div class="element-item character majority female test2" data-category="transition">
<h3 class="name">Anna Valentine</h3>
<span title="This is the staff account used for official business."><a href="http://politeia.jcink.net/index.php?showuser=5"><img src="http://i.imgur.com/nMfx704.png" /></a></span>
</div>
解决了!
您必须为其他组创建函数。请注意,您只是通过选择并将函数应用于第一组
$('#filters').on( 'click', 'button', function() {
使用其他每个组自己的选择器为它们复制此逻辑块。例如:
$('#gender-filters').on( 'click', 'button', function() {
$('#player-filters').on( 'click', 'button', function() {
相关文章:
- 如何禁用在Bootstrap中不完成一步就转到下一步
- 将“下一步”和“上一个”按钮添加到较大的图像
- 引导表单向导 - 防止在提交 ajax 响应的每个页面表单出现错误时滚动到下一步
- 如何创建一个“下一步”按钮,使用 Java 脚本和 Twitter Bootstrap 切换选项卡
- 如何在单击下一步时使文本移动/更改
- 您如何控制在填写表单时单击下一步时 iOS/Android 将关注哪个字段
- Jquery UI选项卡-根据输入字段值,使用“下一步”/“上一步”按钮推进选项卡
- Jquery选项卡单击时高亮显示'下一步'按钮
- 如何解析用户对象以返回屏幕名称并继续下一步操作
- 如何点击谷歌饼图进入下一步行动
- 转到下一步时更改输入值
- 尝试在JavaScript中制作下一步按钮以显示JSON数组
- 跳转到 CasperJS 中步骤超时的下一步
- 如何在 UI 引导分页中禁用下一步按钮
- 等待几秒钟,然后再运行下一步量角器
- 如何在textField上使用zIndex,这样当我在Titanium中按下一步时,我可以移动到其他textField
- 到达最后一个元素时隐藏下一步按钮
- 通过单击“MVC 获取错误”中的“下一步”按钮 asp.net 在同一详细信息页面上显示记录
- 自定义 JS 图像查看器在每次按下“下一步”键后加载速度较慢
- 新手:不确定同位素过滤下一步该去哪里