ссылка на страницу с предварительно выбранным фильтром данных - PullRequest
Новая
       44

ссылка на страницу с предварительно выбранным фильтром данных

0 голосов
/ 24 октября 2018

Я не очень хороший кодер, и я никогда не задавал вопросов на этом сайте, так что терпите меня.

У меня есть страница с меню, которое фильтрует данные с помощью нажатия кнопок.

Это страница: 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:

После попытки кода, предложенного Джеймсом Халлом,Я столкнулся с другой проблемой.

Вот как я разместил код: 

<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 или какого-либо параметра, она все равно выбирает только ее конкретные символы.

Как я уже сказал, я новичок в этом деле, поэтому я не уверен, что делаю.

1 Ответ

0 голосов
/ 25 октября 2018

Функция 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;
}
...