jQuery更改基于html的位置

Question

好的，所以我有下面列出的这个ul和现在购买的链接，它现在转到/ two_hours。我希望它根据点击的内容来改变位置。例如，如果我点击4小时按钮，我想要网址到现在购买按钮去4_hours等等。

这里是我的jQuery至今：

$(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

我会改变HTML结构嵌入段本身里面的链接，使其更具语义从

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

到

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

对于四个环节。然后为每个链接分配一个处理程序：

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

Answer 2

也许你可以添加修改购买链接的ATTR当jQuery的检测点击？

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

当然，这将意味着你有一个类来标记4小时buttn hour4

Answer 3

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

我会留下“2时间”到“two_hours”转换为读者做练习。