jQuery changing the location based on the html

Question

Ok, so I have this ul listed below and the buy now link under it that currently goes to /two_hours. I want it to change the location based on what is clicked. For example if I click the 4 hour button i want the url to the buy now button to go to four_hours and so on.

Here is my jQuery so far:

$(function () {
  $('.box-ul .btn .dot').click(function () {
    $('.box-ul .btn .dot').not(this).removeClass('clicked');    
    $(this).toggleClass('clicked');
  });
});

HTML:

<div class="box-ul box-time left">
  <ul>
      <li><span class="yes"></span><p>Easy to Use</p></li>
      <li><span class="yes"></span><p>Step by Step<br /><span>details instructions</span></p></li>
      <li><span class="yes"></span><p>Setup time<br /><span>under 30 mins</span></p></li>
      <li class="btn">
        <span class="dot left"></span>
      <p class="left">2 hours</p>
        <div class="cl">&nbsp;</div>
      </li>
      <li class="btn">
        <span class="dot left"></span>
        <p class="left">4 hours</p>
        <div class="cl">&nbsp;</div>
        </li>
      <li class="btn">
        <span class="dot left"></span>
        <p class="left">8 hours</p>
        <div class="cl">&nbsp;</div>
      </li>
      <li class="btn">
        <span class="dot left"></span>
        <p class="left">12 hours</p>
        <div class="cl">&nbsp;</div>
      </li>
  </ul>
  <div class="cl">&nbsp;</div>
  <a href="/two_hours" class="buy">Buy Now</a>
</div>
<div class="cl">&nbsp;</div>

Answer 1

Maybe you can add change the attr of the buy link when jquery detect a click?

$('.btn > .hour4').click(function(){ $('a.buy').attr('href','/four_hours')});

of course that would mean you have to label the fourhour buttn with an class hour4

Answer 2

$('.box-ul .btn .dot').click(function () {
    $('a.buy').href = '/'+ $(this).siblings('p').html();
    // other code...
});

I will leave the conversion of "2 hours" to "two_hours" as an exercise to the reader.

Answer 3

I would change the HTML structure to embed the link inside the paragraph itself to make it more semantic from

<p class="left">2 hours</p>

to

<p class="left"><a href="/two_hours">2 hours</a></p>

for each of the four links. Then assign a handler to each link:

$('p.left a').click(function() {
    $('.buy').attr('href', this.href);
    return false; // don't follow the link
});