我不是一个优秀的编码员,我从来没有在这个网站上问过一个问题,所以请多多包涵。
我有一个页面,该页面的菜单可通过单击按钮过滤数据。
这是页面:https://troubletest1.jcink.net/index.php?act=Pages&kid=char2
我想要的是能够创建一个页面链接,其中包含一个(或多个)为您预先选择的过滤器。
例如,过滤器之一是角色的作者。在这种情况下,我们将使用我,詹妮丝。
<div class="button2-group" data-filter-group="ooc">
<myh1>Who Plays Who</myh1>
<button2 class="button2 is-checked" data-filter="">all</button2>
<button2 class="button2" data-filter=".lexi">Lexi - Staff</button2>
<button2 class="button2" data-filter=".jennz">Jennz - Staff</button2>
我尝试了一些我认为类似的事情,可能会起作用,但对我却不起作用。
喜欢这个:
https://stackoverflow.com/a/49883277/10554102
最重要的是,我希望能够创建指向该页面的链接,该链接仅显示特定作者所扮演的角色,而不是整个角色网格。
在此方面,我将不胜感激。提前致谢。
编辑:
添加正在使用的代码:
$(document).ready( function() {
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item'
});
// store filter for each group
var filters = {};
$('.filters').on( 'click', '.button2', function() {
var $this = $(this);
// get group key
var $button2Group = $this.parents('.button2-group');
var filterGroup = $button2Group.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });
});
// change is-checked class on button2s
$('.button2-group').each( function( i, button2Group ) {
var $button2Group = $( button2Group );
$button2Group.on( 'click', 'button2', function() {
$button2Group.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
编辑2:
尝试了James Hull建议的代码后,我遇到了另一个问题。
这就是我放置代码的方式:
<script type="text/javascript">
$(document).ready( function() {
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item'
});
// Sample code using jQuery trigger
$(function(){
var paramsString = "ooc=jennz&ooc=lexi"; // example search url
// IE does not support URLSearchParams().
// So you'll need to find another way to get the params if IE support needed
var searchParams = new URLSearchParams(paramsString);
// Iterate the search parameters.
for (var p of searchParams) {
// trigger appropriate filters
$('[data-filter-group="' + p[0] + '"').find('[data-filter=".' + p[1] + '"]').trigger('click');
}
});
这就是我做链接的方式:
https://troubletest1.jcink.net/index.php?act=Pages&kid=char2#.lexi
现在,除非手动输入并选择“全部”过滤器按钮,否则该页面根本不会重置。通常,它会在页面刷新时默认恢复为“全部”,并且现在不这样做。每当我转到页面时,即使使用的链接没有#.lexi或任何参数,它仍仅选择她的特定字符。
正如我所说,我是新手,所以我不确定自己在做什么。
答案 0 :(得分:0)
jQuery trigger()
函数就足够了。如果您可以如上面在注释中提到的那样获取查询字符串参数,则应该能够使用名称/值对来触发相应的按钮。
“名称”是过滤器组,“值”是特定的过滤器。
$(document).ready(function() {
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item'
});
// store filter for each group
var filters = {`enter code here`};
$('.filters').on( 'click', '.button2', function() {
var $this = $(this);
// get group key
var $button2Group = $this.parents('.button2-group');
var filterGroup = $button2Group.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
// combine filters
var filterValue = concatValues( filters );
// set filter for Isotope
$grid.isotope({ filter: filterValue });
});
// change is-checked class on button2s
$('.button2-group').each( function( i, button2Group ) {
var $button2Group = $( button2Group );
$button2Group.on( 'click', 'button2', function() {
$button2Group.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
// IE does not support URLSearchParams().
// So you'll need to find another way to get the params if IE support needed
var searchParams = new URLSearchParams(window.location.search);
// Iterate the search parameters.
for (var p of searchParams) {
// trigger appropriate filters
$('[data-filter-group="' + p[0] + '"').find('[data-filter="' + p[1] + '"]').trigger('click');
}
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}