Использование jQuery/Javascript для применения функции фильтра по внешней ссылке при загрузке связанных страниц

Это расширение вопросов, которые я задал здесь: Owl Carousel 2: фильтрация элементов, но сохраните порядок сортировки с помощью Javascript (надеюсь, что все в порядке).

У меня есть меню, которое фильтрует элементы. Я хочу, чтобы фильтр применялся при нажатии и внешней ссылке на страницу. Итак, на странице X вы нажмете FilterA, это направит вас на страницу Y и фильтрует элементы в FilterA, как если бы вы только что нажали FilterA на странице Y.

В идеальном мире он просто использовал бы ссылку, например www.mysite.com/pageY/#filterA.

Вы можете увидеть живую страницу здесь: http://bit.ly/1GaL4np

Это функция фильтра:

$(document).ready(function () {
function showProjectsbyCatEur(cat) {
    var owl = $(".owl8").data('owlCarousel');

    owl.addItem('<div/>', 0);

    var nb = owl.itemsAmount;
    for (var i = 0; i < (nb - 1); i++) {
        owl.removeItem(1);
    }

    if (cat == 'all8') {
        $('#projects-copy8 .project8').each(function () {
            owl.addItem($(this).clone());
        });
    } else {
        $('#projects-copy8 .project8.' + cat).each(function () {
            owl.addItem($(this).clone());
        });
    }
    owl.removeItem(0);
}
$('.owl8 .project8').clone().appendTo($('#projects-copy8'));
$('#project-terms8 a').click(function (e) {
    e.preventDefault();
    $('#project-terms8 a').removeClass('active');

    cat = $(this).attr('ID');
    $(this).addClass('active');
    showProjectsbyCatEur(cat);
});
});

Мое меню фильтра выглядит следующим образом:

<div id="filter">
            <h1 class="title">Eurorack</h1>
                <div id="project-terms8">
                <ul class="filter">
                   <li class="filter"><a id="all8" class="active all" onclick="event.preventDefault();" href="#">Show All</a></li>

                   <li class="filter 3x"><a id="3x" onclick="event.preventDefault();" href="#">Clocks, Logic &amp; CV</a></li>

                    <li class="filter 2x"><a id="2x" onclick="event.preventDefault();" href="#">Filters &amp; Resonators</a></li>

                    <li class="filter 1x"><a id="1x" onclick="event.preventDefault();" href="#">Waveform Modifiers</a></li>

               </ul>
                </div>

Итак, ответы до сих пор были полезны, но не совсем решают мою проблему. Если у кого-нибудь есть какие-то советы, это было бы здорово! Кажется, использование # не полезно, поскольку фильтр использует идентификатор, это просто создает привязки к фильтру, поэтому лучше было бы /?filter=FILTERITEM.

В качестве альтернативы новая система фильтров будет в порядке. Пока порядок сортировки остается неизменным, и его можно использовать как с URL-адресом, так и с кнопками.

Ответ 1

Вы можете получить аргумент url с javascript и использовать его в фильтре.

function getURLParameter(name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null

}

var filter= getParameterByName('filter');
showProjectsbyCatEur(filter);

тогда сделайте ссылку что-то вроде "www.mysite.com/pageY/?filter=euro".

Ответ 2

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

Предполагая, что кто-то делает следующий запрос:

http://www.abstract.pinkpoliceman.com/products/#all8

Вы можете в готовности DOM получить значение категории/хэштега и передать его функции, которую вы уже вызываете из обработчика события click:

$(document).ready(function () {
  // INSERT THE DOM READY CODE YOU ALREADY HAVE HERE

  var hash = window.location.hash;

  if(hash.length > 0)
  {
     showProjectsbyCatEur(hash.substring(hash.indexOf('#') + 1));
  }
});

ОБЪЯСНЕНИЕ:

hash.substring(hash.indexOf('#') + 1)

Это займет хеш-значение "# 1234" и подстроит его после точки, в которой находится "#". Он в основном удаляет символ #.

Примечание:

То, что пользователь представляет как хэштег, находится вне вашего контроля. Если они не отправят all8, ваш else все равно поймает его и попытается отфильтровать. Поэтому я предлагаю вам немного пересмотреть условную логику, чтобы удовлетворить "плохие" значения.

SINCE UPDATE (запрос на использование параметров строки запроса)

Получить параметры строки запроса:

$(document).ready(function () {
// INSERT THE DOM READY CODE YOU ALREADY HAVE HERE

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

var filter = getUrlVars()['filter'];

if(filter.length > 0)
   showProjectsbyCatEur(filter);

});

http://jquery-howto.blogspot.co.uk/2009/09/get-url-parameters-values-with-jquery.html

Теперь Url может выглядеть так:

http://www.abstract.pinkpoliceman.com/products/?filter=all8

Ответ 3

user3915578 написал очень хороший RegExp, но я думаю, что было бы полезно лучше понять строки запроса в целом.

Символ "#" используется браузерами для привязки к определенным частям страницы (например, как закладки работают в Википедии).

location - встроенный объект в браузерах. Свойство location.search возвращает часть текущего URL-адреса после "?" символ. Строка запроса - это правильный способ передачи параметров строки между страницами.

Итак, строка запроса - это путь. Каждая из ваших ссылок будет загружать страницу с другим значением, назначенным фильтру. Сам объект местоположения может использоваться для перенаправления при изменении его значения.

$('#project-terms8 a').click(function (e) {
    e.preventDefault();

    cat = $(this).attr('ID');

    // this line causes a redirect to the same page, but with added query string
    // to redirect to a separate page, just build the new url as a string
    location = location.origin + location.pathname + '?filter=' + cat;
});

В вашей функции готовности документа вам нужно будет вызвать функцию фильтра для каждого нового загружаемого файла, но только если у фильтра есть значение. То, что остальной код user3915578 должен идти.

$(document).ready(function () {
    // prev code

    var filter = getParameterByName('filter');
    if (filter) { showProjectsbyCatEur(filter); }
});

Вам нужно будет reset активную li внутри вашей функции фильтра вместо вашей функции щелчка. Надеюсь, это устранит вашу путаницу в реализации.

Ответ 4

Если вы хотите, чтобы хэши работали для ссылок на одной странице, вы можете использовать прослушиватель событий для прослушивания изменений хэша:

function filterByHash(){
    if(window.location.hash)//.match(/#(all8|\dx)/)
        showProjectsbyCatEur(window.location.hash.substr(1));
}

$(document).ready(filterByHash);
$(window).on('hashchange',filterByHash);

Вы можете использовать регулярное выражение для фильтрации недопустимых хэшей.

Кроме того, если вы хотите поддерживать старые браузеры, вы можете добавить что-то вроде этого вместо прослушивателя событий hashchange:

$('#filter').on('click','a[href^=#]',function(){
    setTimeout(filterByHash,0);
});

setTimeout подталкивает функцию в конец цикла событий так, чтобы она вызывалась после изменения хэша.