CODEWITHSUNDEEP
javascriptjqueryclass
popshuvit
popshuvit

Reputation: 110

How to append the class of a clicked link to the end of the href of another anchor tag?

I'm working on a website that makes use of isotope filters and hash history.
However, in order for my filters to work I need #filter=.print to be added after the permalink of my thumbnails "a.perma". the ".print" is the class of the filter thats being clicked "option-set a". In this case the print filter.
I am not too skilled at jQuery and any help would be appreciated.
Here's the code I've been messing with:

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);
});

Upvotes: 1

Views: 105

Answers (2)

ATOzTOA
ATOzTOA

Reputation: 35950

Here is the working code. Removes any previous filters. Keeps the permalink value even after going to another page and coming back. Uses 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);
        }
    });
});

Upvotes: 1

Anthony Grist
Anthony Grist

Reputation: 38345

You could try this, using .attr() with a function to determine and set the new value to avoid having to iterate and get/set separately.

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;
    });
});

Depending on what the original href attributes look like you may have to add more or less to the string; I've assumed in the above that the #filter= part is already included. You may also want to check that it's not already in the existing href so it's not added more than once.

Upvotes: 1

Related Questions