Change href attribute

Question

In need to change part of this href:

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

I have several designs, and some colors - xxxxx - for the designnumber number and yyy for colornumber, when I clicked on one of the pictures or change one of the href colors according to the value:

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

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

Is there a way to do this using jQuery?

Answer 1

Your variable link will be:

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

Your switchable links will look like this:

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

Your javascript will look like this:

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

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

, colorLink tags onclick, , designNumber colorNumber , , , , . , , " ", , UpdateActionLink , , , " ".

Answer 2

attr 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");
});

. , , .

Answer 3

DOM, ;

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

Answer 4

Add a class to your links, say myClass and an identifier on the main link, say myLink, and something like this should work:

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