javascript - jQuery 根据 html 更改位置

Question

好的，我在下面列出了这个 ul，其下方的立即购买链接当前位于/two_hours。我希望它根据单击的内容更改位置。例如，如果我单击 4 小时按钮，我希望“立即购买”按钮的 URL 转到 four_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
});