Question

我不是一个优秀的编码员，我从来没有在这个网站上问过一个问题，所以请多多包涵。

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

这是页面：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或任何参数，它仍仅选择她的特定字符。

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

Answer 1

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

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

1 个答案: