Fügen Sie zusätzlichen Text am Ende aller Links in einer bestimmten Klasse hinzu

Question

Ich habe ein 'a' Element mit Klasse "Fragment" erstellt. Ich suche nach PHP/JS-Code, der am Ende des gesamten Klassenfragments der URL zusätzlichen Text hinzufügt.

Zum Beispiel:

<a class="fragment" href="http://google.com/" target="_blank">click here</a> 

Der obige Code automatisch zu

<a class="fragment" href="http://google.com/extratext" target="_blank">click here</a> 

ändern sollte habe ich versucht, diesen Code aber es funktioniert nicht bei allen. Der Link, wenn geklickt wird, führt immer noch zur ursprünglichen URL

$("a").click(function() { 
$(this).prop("href", $(this).prop("href") + "extratext"); 
}); 

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Dieser Code-Schnipsel fügt das Attribut href, wenn der Link auf Klick:

document.getElementsByClassName("link")[0].addEventListener("click", function() { 
 
     this.href += "extratext"; 
 
});

<a class="link" href="http://google.com/" target="_blank">click here</a>

Wenn Sie mehrere Hinzufügen Verwendung dieses verhindern:

document.getElementsByClassName("link")[0].addEventListener("click", function() { 
 
    if(this.hasExecuted) return; 
 
    this.href += "extratext"; 
 
    this.hasExecuted = true; 
 
});

<a class="link" href="http://google.com/" target="_blank">click here</a>

Wenn Sie mehrere zur Ergänzung der URL verhindern wollen, aber es auch alle Links hinzufügen:

NodeList.prototype.addEventListener = function(type, handler) { 
 
    for(var node of this) 
 
     node.addEventListener(type, handler); 
 
} 
 

 
HTMLCollection.prototype.addEventListener = function(type, handler) { 
 
    for(var node of this) 
 
     node.addEventListener(type, handler); 
 
} 
 
var hasExecuted = false;  
 
var links = document.getElementsByClassName("link"); 
 
links.addEventListener("click", function() { 
 
    if(hasExecuted) return; 
 
    for(var link of links) 
 
     link.href += "extratext"; 
 
    hasExecuted = true; 
 
});

<a class="link" href="http://google.com/" target="_blank">click here</a> 
 
<a class="link" href="http://http://stackoverflow.com/" target="_blank">click here too</a>

Wenn Sie möchten, die sich nicht ändern actual href Attribut des Links tun Sie dies stattdessen:

 
 
document.getElementsByClassName("link")[0].addEventListener("click", function() { 
 
    var a = document.createElement("a"); 
 
    a.target = "_blank"; 
 
    a.href = this.href + "extratext"; 
 
    document.body.appendChild(a); 
 
    a.click(); 
 
    document.body.removeChild(a); 
 
}, false);

<a class="link" href="http://google.com/" target="_blank">click here</a>

Das Skript als eine einfache Funktion verwenden:

openWithAppendedUrl(document.getElementsByClassName("link")[0], "sometext"); 
 

 
function openWithAppendedUrl(link, urlPart) { 
 
    link.addEventListener("click", function() { 
 
     var a = document.createElement("a"); 
 
     a.target = "_blank"; 
 
     a.href = this.href + urlPart; 
 
     document.body.appendChild(a); 
 
     a.click(); 
 
     document.body.removeChild(a); 
 
    }, false); 
 
}

<a class="link" href="http://google.com/" target="_blank">click here</a>

Answer 2

Versuchen Sie es.

attr geben Sie ein a-Tag-Attribut zurück.

$("a").click(function() { 
    $(this).attr("href",$(this).attr("href") + "extratext")); 
}); 

Hier erfahren Sie mehr. http://api.jquery.com/attr/

Answer 3

Sie können die setAttribute und getAttribute:

window.addEventListener('DOMContentLoaded', function(e) { 
 
    
 
    // 
 
    // get all elements with that class 
 
    // 
 
    var fragments = document.getElementsByClassName('fragment'); 
 
    
 
    // 
 
    // for each element attach the event handler 
 
    // 
 
    for(var i = 0; i<fragments.length; i++) { 
 
    fragments[i].addEventListener('click', function(e) { 
 
     
 
     // add extra text 
 
     var href = this.getAttribute('href'); 
 
     this.setAttribute('href', href + 'extratext'); 
 
     
 
     console.log(this.outerHTML); 
 
    }, false); 
 
    } 
 
});

<a class="fragment" href="http://google.com/" target="_blank">click here</a>

Answer 4

Verwenden attr Eigenschaft zu aktuellem Anker Tag href bekommen.

$("a").click(function() { 
 
    $(this).attr("href", $(this).attr("href") + "extratext"); 
 
}); 
 
    

<a class="fragment" href="http://google.com/" target="_blank">click here</a>

Answer 5

Oder können Sie die href des Elements finden Sie wollen, danach können Sie ein Set neuer Wert des href-Attributs, das das alte ersetzt, wie folgt:

<a class="fragment" href="http://stackoverflow/" target="_blank" onclick="addExtraText()">click here</a> 

    function addExtraText() { 
    var linkElement = document.getElementsByClassName("fragment")[0]; 
    linkElement.setAttribute('href', 'http://stackoverflow/questions/'); 
    }