Question

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

Answer 1

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.