CODEWITHSUNDEEP
javascriptjquery
ferrucio
ferrucio

Reputation: 51

Changing href attribute

In need to change a part of this href:

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

I have some designs, and some colors, xxxxx stands for designnumber and yyy for colornumber, when one of the designs is clicked or one of the colors the href should change 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 any way to do this with JQuery?

Upvotes: 5

Views: 394

Answers (4)

wheresrhys
wheresrhys

Reputation: 23500

To minimise teh number of DOM queries you do you could store the current colour and design within an object;

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

Upvotes: 1

kgiannakakis
kgiannakakis

Reputation: 104158

You can use the attr method to read and modify the 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 the old value is not bullet proof. You could avoid this by creating two variables to hold the design and color.

Upvotes: 1

Serty Oan
Serty Oan

Reputation: 1726

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

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

Upvotes: 0

Patrick Karcher
Patrick Karcher

Reputation: 23603

Your variable link would be:

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

Your toggling links would 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 would look like this:

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

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

You'll probably want to add some validation to the colorLink tags onclick event to check to make sure designNumber and colorNumber have valid values, and if not, cancel the event and give the human a messaging saying they need to choose a valid design and color. Better would probably be to make a Get Design button, have disabled to start, and in UpdateActionLink check to see if the values are valid and if so enable the Get Design button.

Upvotes: 1

Related Questions