2010-07-19 5 views
0

좋아요, 그래서이 ul은 아래 나열되어 있고 현재 buy_link는/two_hours로갑니다. 클릭 한 위치를 기반으로 위치를 변경하고 싶습니다. 예를 들어 4 시간 버튼을 클릭하면 구매 버튼의 URL을 four_hours로 이동하는 등의 작업을 수행합니다. 여기jQuery는 hltml을 기반으로 위치를 변경합니다.

지금까지 내 jQuery를 수 있습니다 :

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

HTML : JQuery와 클릭을 감지 할 때

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

답변

1

나는 네 개의 링크의 각각

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

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

에서 더 의미 할 단락 자체 내부 링크를 포함하는 HTML 구조를 변경합니다. 그런 다음 각 링크에 처리기를 할당하십시오.

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

은 어쩌면 당신은 구매 링크의 ATTR을 변경, 추가 할 수 있습니까?

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

당신이

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

나는 독자에게 연습으로 "2시간"을 "two_hours"의 전환을 떠나 hour4 클래스로 사시간의 buttn 레이블을해야 의미가 .

관련 문제