链接到预先选择了数据过滤器的页面

Question

我不是一个出色的程序员，而且我从未在这个网站上提出过任何问题，所以请耐心等待。

我有一个页面，该页面有一个通过单击按钮来过滤数据的菜单。

这是页面：https://troubletest1.jcink.net/index.php?act=Pages&kid=char2

我想要的是能够使用已经为您预先选择的一个（或多个）过滤器创建一个指向该页面的链接。

例如，其中一个过滤器是按角色的作者进行的。在这种情况下，我们将使用我，Jennz。

<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 或任何参数，它仍然只选择她的特定字符。

正如我所说，我是这方面的新手，所以我不确定自己在做什么。

Answer 1

jQuery trigger() 函数应该足够了。如果您可以像上面在 cmets 中提到的那样获取查询字符串参数，那么您应该能够使用名称/值对来触发相应的按钮。 'name' 是过滤器组，'value' 是特定过滤器。

$(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;
}