CODEWITHSUNDEEP
jqueryhrefdynamic
Argoron
Argoron

Reputation: 759

Need help with the dynamic building of a href attribute with jQuery

and sorry should the question be redundant, but I've been looking through previous questions but couldn't find what I'm looking for specifically. I'm new to jQuery so I adapting similar solutions is hard.

I basically have two button sets, one for languages, and the other for letters of the alphabet, and I would like to construct the href of the outgoing link dynamically so that it is reflecting the language-letter combination the user has selected.

Example: if the user clicks on 'English' and 'A', then the outgoing link would be '... href = 'Glossary-English-A.html'.

Thanks in advance for your help

Upvotes: 0

Views: 1055

Answers (1)

Mark Coleman
Mark Coleman

Reputation: 40863

given the following markup:

<ul id="lang">
    <li>
        <input type="button" value="English"/>
    </li>
</ul>

<ul id="letters">
    <li>
        <input type="button" value="A"/>
    </li>
</ul>

<a href="#" id="theLink">Go!</a>

And the script...

$(function(){


  $("#lang input[type=button]").click(function() {
    $("#theLink").data("lang", $(this).val());
  });

  $("#letters input[type=button]").click(function() {
    $("#theLink").data("letter", $(this).val());
  });
  $("#theLink").click(function() {
    var link = "Glossary-" + $(this).data("lang") + "-" + $(this).data("letter") + ".html";
    alert(link);
    $(this).attr("href", link);
  });
});

Just what i cam up in the few minutes before dinner :)

Example on jsfiddle.

Upvotes: 1

Related Questions