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」轉換爲讀者做練習。