Question

Lets say I have a bunch of links with the same class but different anchor text like

<a class="hey" href="sitepoint.com">sitepoint</a>
<a class="hey" href="google.com">google</a>

When the page loads I want the anchor text of each link to display the same text of my choosing. However, when the visitor clicks a link the anchor changes back to the orignial. It would be best if all links could be changed back their original if any link is clicked but this isn’t that important.

Any help is apprecaited.

Answer 1

$('a.hey').each(function(){
    $(this).data('oldHref', $(this).attr(href));
    $(this).attr('href', 'CUSTOM TEXT HERE');
    $(this).click(function(){
        this.attr('href', this.data('oldHref');
        return false; //prevent default action, I assume
    })
})

If you meant the innerHTML:

$('a.hey').each(function(){
    $(this).data('oldInner', this.innerHTML);
    this.innerHTML = 'CUSTOM TEXT HERE';
    $(this).click(function(){
        this[0].innerHTML = this.data('oldInner');
        return false; //prevent default action, I assume
    })
})