Cambiar atributo href

Question

En necesidad de cambiar una parte de este href:

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

tengo algunos diseños, y algunos colores, xxxxx representa designnumber e yyy para colornumber, cuando se hace clic en uno de los diseños o uno de los colores del href debe cambiará de acuerdo con el valor:

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

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

¿hay alguna manera de hacer esto con jQuery?

Answer 1

Su enlace variable sería:

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

Sus enlaces alternar se vería así:

<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> 

Su Javascript se vería así:

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

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

es probable que desea agregar algo de validación a las etiquetas colorLink onclick evento para verificar para asegurarse de que designNumb er y colorNumber tienen valores válidos, y si no, cancela el evento y le da al humano un mensaje diciendo que necesita elegir un diseño y color válidos. Lo mejor sería crear un botón Obtener diseño, inhabilitar para comenzar y, en UpdateActionLink, verificar si los valores son válidos y, de ser así, activar el botón Obtener diseño.

Answer 2

Añadir una clase a sus enlaces, digamos myClass, y una identificación en el enlace principal, digamos MyLink, y algo como esto debería funcionar:

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

Answer 3

Usted puede utilizar el método attr a leer y modificar el 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"); 
}); 

Analizar el valor antiguo no es a prueba de balas. Puede evitar esto creando dos variables para mantener el diseño y el color.

Answer 4

Para minimizar el número de consultas DOM que hace, puede almacenar el color y el diseño actuales dentro de un objeto;

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