Question

我正在开发一个使用同位素过滤器和哈希历史的网站但是，为了让我的过滤器工作，我需要在缩略图#filter=.print的永久链接后添加"a.perma"。 ".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()来确定和设置新值，以避免必须单独迭代和获取/设置。

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中，因此不会多次添加。

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

2 个答案: