Modification de l'attribut href

Question

Besoin de changer une partie de ce href:

<a href="media/xxxxx-yyy.jpg">large pic</a> 

J'ai quelques dessins et quelques couleurs XXXXX est synonyme de designnumber et YYY pour colornumber, lorsque l'un des dessins est cliquée ou un des couleurs href devrait changer en fonction de la valeur:

<a href="#">design1</a> 
<a href="#">design2</a> 
<a href="#">design3</a> 

<a href="#">color1</a> 
<a href="#">color2</a> 
<a href="#">color3</a> 

Est-il possible de le faire avec JQuery?

Answer 1

Votre lien variable soit:

<a id="colorLink" href="media/xxxxx-yyy.jpg">large pic</a> 

Vos liens affin de se ressembler à ceci:

<a href="#" onclick="designNumber='0001'; UpdateActionLink();">design1</a> 
<a href="#" onclick="designNumber='0002'; UpdateActionLink();">design2</a> 

<a href="#" onclick="colorNumber='001'; UpdateActionLink();">color1</a> 
<a href="#" onclick="colorNumber='002'; UpdateActionLink();">color2</a> 

Votre javascript ressemblerait à ceci:

var designNumber = ""; 
var colorNumber = ""; 

function UpdateActionLink() { 
    $("#colorlink").attr("href", "media/" + designNumber + "-" + colorNumber + ".jpg"); 
} 

Vous aurez probablement voulez ajouter une validation à l'événement onclick des tags colorLink pour vérifier que designNumb er et colorNumber ont des valeurs valides et, dans le cas contraire, annulent l'événement et donnent à l'humain un message indiquant qu'il doit choisir un design et une couleur valides. Mieux serait probablement de faire un bouton Get Design, ont désactivé pour démarrer, et dans UpdateActionLink vérifier pour voir si les valeurs sont valides et si oui, activer le bouton Get Design.

Answer 2

Ajouter une classe à vos liens, disons myClass, et une carte d'identité sur le lien principal, disons myLink, et quelque chose comme cela devrait fonctionner:

$('.myClass').each(function(el) { 
    el.bind('click', function(event) { 
     $('myLink')attr('href', el.text()); 
    } 
}); 

Answer 3

Vous pouvez utiliser la méthode attr à lire et à modifier le href.

html:

<a id="LargePic" href="media/xxxxx-yyy.jpg">large pic</a> 

<a class="design" href="#">design1</a> 
<a class="design" href="#">design2</a> 
<a class="design" href="#">design3</a> 

<a class="color" href="#">color1</a> 
<a class="color" href="#">color2</a> 
<a class="color" href="#">color3</a> 

javascript:

$(".design").click(function() { 
    var old = $("#LargePic").attr("href"); 
    var pos = old.indexOf('-'); 
    val color = old.substr(pos, 3); 
    $("#LargePic").attr("href", "media/" + $(this).text() + "-" + color + ".jpg"); 
}); 

Parsing l'ancienne valeur n'est pas l'épreuve des balles. Vous pouvez éviter cela en créant deux variables pour contenir le dessin et la couleur.

Answer 4

Pour minimiser le nombre de requêtes DOM, vous pouvez stocker la couleur et la conception en cours dans un objet;

function DesignSwitcher() { 
    var params = $("#largePic").attr("id").split["-"], 
     des = params[0], 
     col = params[1]; 
    $(".design").click(function() { 
     des = this.innerHTML; 
     $("#largePic").attr("href", "media/" + des + "-" + col + ".jpg"); 
    }); 
    $(".color").click(function() { 
     col = this.innerHTML; 
     $("#largePic").attr("href", "media/" + des + "-" + col + ".jpg"); 
    }); 

} 

new DesignSwitcher();