Changing href attribute

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

<a href="#" onclick="changeDesign('00001');">design1</a>
<a href="#" onclick="changeDesign('00002');">design2</a>
<a href="#" onclick="changeDesign('00003');">design3</a>

<a href="#" onclick="changeColor('001');">color1</a>
<a href="#" onclick="changeColor('002');">color2</a>
<a href="#" onclick="changeColor('003');">color3</a>

<script type="text/javascript">
  function changeDesign(dNum){
     var current = $('#largePic').attr("href");
     $('#largePic').attr({'href': current.replace(/\/\d{5}-/, "/"+dNum+"-")});
  }

  function changeColor(cNum){
     var current = $('#largePic').attr("href");
     $('#largePic').attr({'href': current.replace(/-\d{3}\./, "-"+cNum+".")});
  }
</script>

You could actually abstract the functions further if you wanted, but two lines is pretty lightweight already. If the color/design numbers were algorithmic in some way, you could auto-generate the on-click events as part of $(document).ready() too.

EDIT: I've been hacking too much Scheme/Elisp lately. I forgot that infix languages can't allow variable names like c-num. Camel-case it is...