如何将点击的链接的类附加到另一个锚标签的href的末尾？

Question

我正在开发一个使用同位素过滤器和散列历史的网站。

但是，为了让我的过滤器工作，我需要在缩略图"a.perma"的永久链接之后添加#filter=.print。".print"是正在单击"option-set a"的过滤器的类。在本例中为打印过滤器。

我在jQuery不是太熟练，任何帮助都将不胜感激。

下面是我处理过的代码：

var myClass;

jQuery("option-set a").click(function() {
    myClass = jQuery(this).attr("class");
});

jQuery("a.perma").each(function() {
    var _href = jQuery(this).attr("href"); 
    jQuery(this).attr("href", _href + myClass);
});

Answer 1

以下是工作代码。删除所有以前的过滤器。即使在转到另一页并返回后仍保留固定链接值。使用localStorage。

if(typeof(Storage)!=="undefined") {
    var oldClass = localStorage.getItem("permalink");

    if(oldClass != null && oldClass != "") {
        jQuery("a.perma").each(function() {
            var _href = jQuery(this).attr("href"); 
            _href = _href.split("#")[0];

            jQuery(this).attr("href", _href + "#filter=." + oldClass);
        });
    }
}

jQuery("option-set a").click(function() {
    myClass = jQuery(this).attr("class");

    jQuery("a.perma").each(function() {
        var _href = jQuery(this).attr("href"); 
        _href = _href.split("#")[0];

        jQuery(this).attr("href", _href + "#filter=." + myClass);

        if(typeof(Storage)!=="undefined") {
            localStorage.setItem("permalink", myClass);
        }
    });
});

Answer 2

您可以尝试这样做，使用.attr()和一个函数来确定和设置新值，以避免分别进行迭代和get/set。

jQuery("option-set a").click(function() {
    var myClass = this.className; // same as $(this).attr('class');
    jQuery('a.perma').attr('href', function(i, oldHref) {
        return oldHref + '.' + myClass;
    });
});

根据原始href属性的外观，您可能需要向字符串中添加或多或少的内容；我在上面假设已经包含了#filter=部件。您可能还想检查它是否已经不在现有的href中，这样它就不会被多次添加。