History.js从列表项中删除活动类

Question

这是我正在尝试做的事情。让我们说在我的AJAX应用程序中，我单击一个链接，该链接向链接添加一个名为active的类，此单击也会触发History.js上的状态更改。

我需要帮助理解的是如何使用当前状态保存当前活动链接，因此当我单击后退或前进按钮时，它会从链接中删除或添加活动类，具体取决于州看起来就像那个特定的URL。

Answer 1

我再看一下这个问题，并认为我找到了一个更好的方法。在我将点击事件

上的活动类添加到列表项之前

$(".products ul li a").on("click", function(e) {

  $this.closest("li").toggleClass("active");
}

但是现在我认为更好的方法是在发生History statechange事件时将活动类添加到我的列表项中。这将允许我首先检索GET url参数，然后根据这些值查找列表项，其数据值属性与url值匹配。

以下是我认为找到正确匹配元素所需步骤的细分。

1. 在History.js statechange事件上调用activate_items（）方法
2. 查找是否有任何名为“product_cats”或“color”的url参数，如果有，则表示有任何值。
3. 抓取jquery列表项集合
4. 检查集合中的每个列表项是否都有一个名为“value”的数据属性，该属性与其中一个URL参数值匹配。
5. 如果匹配，则将活动类添加到列表项
6. 如果没有匹配则删除活动类

以下是我的网址参数示例。所以我有2个参数都有多个值。 的本地主机/ mytheme的/ product_cats = 17,60＆安培;颜色= 13,14

History.Adapter.bind(window,'statechange',function(e){ 
   activate_items();
}

// GET PARAMETER
function get_parameter( name ){

    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var state = History.getState();
    var current_url = state.cleanUrl;
    var results = regex.exec( current_url );

    if( results == null )
        return "";
    else {
        return results[1];
    }   
}

// ACTIVATE ITEMS
function activate_items( url ){

    var items;

    // Categories
    var cats = get_parameter("product_cats");
    var colors = get_parameter("color");
    if (cats.length > 0) {
        items = jQuery(".product ul li a");

        // Check each <li> for a match. If its data-value attribute matches 
        // one of the values from cats than add an active class to the <li>
    };
    if (colors.length > 0) {
        items = jQuery(".product ul li a");

        // Check each <li> for a match. If its data-value attribute matches 
        // one of the values from colors than add an active class to the <li>
    };
}

你可以在代码中看到我还没有弄清楚如何进行匹配。

重申我正在做所有这些，所以当您点击浏览器上的后退和前进或刷新按钮时，列表项将具有正确的活动状态，具体取决于URL参数。我对任何方向持开放态度，即使是对这个问题完全不同的方法。