Question

我正在使用Jquery让访问者修改存档页面上的查询顺序和每页数量。存档列表顶部的栏看起来像这样：

排序 title/date/poularity 查看每页 'all/20'（如果适用，则显示分页）。

到目前为止，

完整的工作函数和模板标记：pastebin

这一切都很有效但目前这两个事件正在相互重置 - 这意味着我可以更改金额或者我可以更改订单但我不能同时进行amt和排序工作。我会复杂化吗？是否有更简单的方法将两者结合起来？

$('.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'，我是否能以某种方式获得'a'或'o'的值另一个事件是否可以应用？

同样，在事件重新加载查询后，类重点会被重置 - 使其变得无用 - 因为我想在视觉上突出显示“当前”排序＆amp; amt按钮/用户选项。有没有办法在新查询重新加载页面后仍然应用高亮类？

感谢您的任何见解！

Answer 1

我已经回答了我原来问题的第一部分（如何制作它以便两个事件不会自行取消）它涉及从url获取和剥离变量 - 然后我使用if else语句来说如果它是未定义的，则在地址中使用默认值，如果已经在url中设置了该值，则传递该值。

这就是'sortbar'到目前为止的样子（并且它有效！）： how sort bar looks

完整的功能（仍然有点混乱）Paste bin full code

我仍然无法将高亮类应用于当前按钮/选项。到目前为止，我的逻辑是创建一个运行窗口加载并从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");
    }       
});`

有没有人对我遗失的内容有任何见解？

Answer 2

我再次回答了我自己的问题（第2部分关于使按钮和选项有一个当前类）我相信它们都足够相关，因为它们都是关于如何获取url中的var值它们在同一个整体功能中 - 但这是我在这个网站上的第一篇文章 - 所以也许我误解了。我最终得出的结论：

$(".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-button类调用按钮 - 如果它们的值等于从url中删除的var值，则将“current”类添加到相关的“当前”按钮。适合控制按钮为用户呈现的方式。希望这可以帮助某人，如果他们像我一样苦苦挣扎。

我可以将归档模板的Jquery排序/每页查看事件组合起来，以便它们不会相互重置吗？

2 个答案: