Могу ли я объединить шаблон архива Jquery сортировать по событиям на странице, чтобы они не перезагружали друг друга?

Я использую JQuery, чтобы посетители изменяли порядок запросов и количество страниц на странице архива. Бар в верхней части списка архивов выглядит следующим образом:

<span>сортировать по</span> <code>title/date/poularity</code> <span>см. на странице</span> <code>'all/20'</code> (и, если применимо, отображать разбивку на страницы).

полная рабочая функция и тег шаблона, который у меня есть до сих пор: pastebin

Все это отлично работает, но в настоящее время два события сбрасывают друг друга - это означает, что я могу изменить сумму, или я могу изменить порядок, но я не могу одновременно работать с сортировкой и сортировкой. Я собираюсь с этим осложниться? Есть ли более простой способ объединить эти два?

$('.amt-button').click(function(){
 var a_str = $(this).text();
window.location.href = "?a="+a_str;
 $(this).addClass("highlight");
});

$('.sorter-dropdown').change(function(){
var o_str = $(this).val();
window.location.href = "?o="+o_str; 
$(this).addClass("highlight");
});

Как вы можете видеть выше, они вызываются разными событиями - нажатие кнопки и выбор изменений - но мне было интересно, могу ли я как-то получить значение "a" или "o", если оно уже было установлено и вызвано в другом событии так что они могут применяться одновременно?

Кроме того, подсветка класса сбрасывается после того, как событие перезагружает query- вид рендеринга, и это бесполезно, потому что я хотел визуально выделить кнопку "current" sort & amt/options для пользователя. есть ли способ сделать класс подсветки по-прежнему применяться после того, как новый запрос перезагрузит страницу?

Спасибо за любые идеи!

2 ответа

Я ответил на часть 1 моего первоначального вопроса (как сделать так, чтобы два события не отменяли себя). Это касалось получения и удаления переменной из URL-адреса, которую я тогда использовал с выражением if else, чтобы сказать, undefined использовать значение по умолчанию в адресе, и если оно уже было установлено в URL-адресе, введите это значение.

Вот как выглядит "сортировка" (пока он работает!): Как выглядит сортировка

Полная функция (все еще немного беспорядочная). Вставить полный код bin.

У меня все еще возникают проблемы с применением класса подсветки для текущих кнопок/опций. Моя логика до сих пор заключается в том, чтобы сделать функцию, которая запускается с загрузкой окна и извлекает переменную из url - тогда проверяет, есть ли кнопка с равным значением - и если это применит класс к указанной кнопке. Однако я думаю, что мне не хватает некоторых ключевых предметов, чтобы добраться туда:

'// trying to make highlight style carry over. 
$(window).load(function(){
 // get the amt per value from url set it as amt_highlight var
 var amt_highlight = $.getUrlVar('amt_per');
 // if a button with class.amount-buttons value is equal to amt_highlight
 if ( $('.amt-button').val(); == amt_highlight){
 // then add class to that button
 $(this).addClass("highlight");
 } 
});'

Кто-нибудь знает, что мне не хватает?


Я снова ответил на свой вопрос (part2 о том, что кнопки и опции имеют текущий класс). Я считаю, что они оба были связаны друг с другом, чтобы быть в одном вопросе, потому что они оба были о том, как получить значения var в URL-адресе, чтобы использовать их в такая же общая функция - но это был мой первый пост на этом сайте - так, может быть, я неправильно понял. Что я окончательно разработал:

$(".amt-button").addClass(function(index) {
var addedClass;
var amt_current = $.getUrlVar('amt_per');
var amt_val = $(this).val();
if ( amt_val == amt_current ) {
 addedClass = "current";
}
return addedClass;
});

Чтобы объяснить: функция addclass вызывает кнопки с классом кнопок amt - и если их значение равно значению var, удалённому от url - класс current добавляется к текущей кнопке. Хорошо, что вы контролируете, как кнопки отображают для пользователя. надеюсь, это помогает кому-то, если они борются с этим, как и я.

licensed under cc by-sa 3.0 with attribution.