jQuery changer l'emplacement basé sur le html

Question

Ok, donc j'ai ce ul listé ci-dessous et le lien buy now en dessous qui va actuellement à/two_hours. Je veux qu'il change l'emplacement en fonction de ce qui est cliqué. Par exemple, si je clique sur le bouton 4 heures je veux que l'url du bouton Acheter maintenant pour aller à quatre heures et ainsi de suite.

Voici mon jQuery jusqu'à présent:

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

je changerais la structure HTML pour intégrer le lien dans le paragraphe lui-même pour le rendre plus sémantique de

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

à

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

pour chacun des quatre liens. Puis affectez un gestionnaire à chaque lien:

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

Answer 2

Peut-être que vous pouvez ajouter changer le attr du lien d'achat lorsque jquery détectez un clic?

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

Bien sûr, cela signifie que vous devez étiqueter le buttn de quatre heures avec une classe hour4

Answer 3

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

Je laisserai la conversion de « 2 heures » à « two_hours » comme un exercice au lecteur .