Πώς μπορείτε να αλλάξετε το href για έναν υπερσύνδεσμο χρησιμοποιώντας την jQuery;
Χρήση του
$("a").attr("href", "http://www.google.com/")
θα τροποποιήσει το href όλων των υπερσυνδέσμων ώστε να δείχνει στην Google. Πιθανόν να θέλετε έναν κάπως πιο εκλεπτυσμένο επιλογέα όμως. Για παράδειγμα, αν έχετε ένα μείγμα από ετικέτες άγκυρας πηγής συνδέσμου (υπερσύνδεσμος) και στόχου συνδέσμου (γνωστός και ως "άγκυρα"):
<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>
...Τότε μάλλον δεν θέλετε να προσθέσετε κατά λάθος τα χαρακτηριστικά href
σε αυτές. Για ασφάλεια λοιπόν, μπορούμε να καθορίσουμε ότι ο επιλογέας μας θα ταιριάζει μόνο με ετικέτες <a>
με υπάρχον χαρακτηριστικό href
:
$("a[href]") //...
Φυσικά, πιθανόν να έχετε κάτι πιο ενδιαφέρον στο μυαλό σας. Αν θέλετε να ταιριάξετε μια άγκυρα με ένα συγκεκριμένο υπάρχον href
, θα μπορούσατε να χρησιμοποιήσετε κάτι τέτοιο:
$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')
Αυτό θα βρει συνδέσμους όπου το href
ταιριάζει ακριβώς με τη συμβολοσειρά http://www.google.com/
. Μια πιο περίπλοκη εργασία θα μπορούσε να είναι η αντιστοίχιση και στη συνέχεια η ενημέρωση μόνο ενός μέρους του href
:
$("a[href^='http://stackoverflow.com']")
.each(function()
{
this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/,
"http://stackoverflow.com");
});
Το πρώτο μέρος επιλέγει μόνο συνδέσμους όπου το href αρχίζει με https://stackoverflow.com
. Στη συνέχεια, ορίζεται μια συνάρτηση που χρησιμοποιεί μια απλή κανονική έκφραση για να αντικαταστήσει αυτό το μέρος του URL με ένα νέο. Σημειώστε την ευελιξία που σας δίνει αυτό - οποιοδήποτε είδος τροποποίησης του συνδέσμου μπορεί να γίνει εδώ.
Χρησιμοποιήστε τη μέθοδο attr
στην αναζήτηση σας. Μπορείτε να αντικαταστήσετε οποιοδήποτε χαρακτηριστικό με μια νέα τιμή.
$("a.mylink").attr("href", "http://cupcream.com");
Ανάλογα με το αν θέλετε να αλλάξετε όλους τους πανομοιότυπους συνδέσμους σε κάτι άλλο ή αν θέλετε να ελέγξετε μόνο αυτούς που βρίσκονται σε ένα συγκεκριμένο τμήμα της σελίδας ή κάθε έναν ξεχωριστά, μπορείτε να κάνετε κάτι από τα εξής.
Αλλάξτε όλους τους συνδέσμους προς την Google, ώστε να δείχνουν στους Χάρτες Google:
<a href="http://www.google.com">
$("a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');
Για να αλλάξετε τους συνδέσμους σε ένα συγκεκριμένο τμήμα, προσθέστε την κλάση του container div's στον επιλογέα. Αυτό το παράδειγμα θα αλλάξει το σύνδεσμο Google στο περιεχόμενο, αλλά όχι στο υποσέλιδο:
<div class="content">
<p>...link to <a href="http://www.google.com/">Google</a>
in the content...</p>
</div>
<div class="footer">
Links: <a href="http://www.google.com/">Google</a>
</div>
$(".content a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');
Για να αλλάξετε μεμονωμένους συνδέσμους ανεξάρτητα από το πού βρίσκονται στο έγγραφο, προσθέστε ένα id στο σύνδεσμο και στη συνέχεια προσθέστε αυτό το id στον επιλογέα. Αυτό το παράδειγμα θα αλλάξει τον δεύτερο σύνδεσμο Google στο περιεχόμενο, αλλά όχι τον πρώτο ή αυτόν στο υποσέλιδο:
<div class="content">
<p>...link to <a href="http://www.google.com/">Google</a>
in the content...</p>
<p>...second link to <a href="http://www.google.com/"
id="changeme">Google</a>
in the content...</p>
</div>
<div class="footer">
Links: <a href="http://www.google.com/">Google</a>
</div>
$("a#changeme").attr('href',
'http://maps.google.com/');