好的,我在下面列出了这个 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"> </div>
</li>
<li class="btn">
<span class="dot left"></span>
<p class="left">4 hours</p>
<div class="cl"> </div>
</li>
<li class="btn">
<span class="dot left"></span>
<p class="left">8 hours</p>
<div class="cl"> </div>
</li>
<li class="btn">
<span class="dot left"></span>
<p class="left">12 hours</p>
<div class="cl"> </div>
</li>
</ul>
<div class="cl"> </div>
<a href="/two_hours" class="buy">Buy Now</a>
</div>
<div class="cl"> </div>
最佳答案
我会更改 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
});
关于javascript - jQuery 根据 html 更改位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3277847/