添加列表项的网址,并将其添加为按钮的链接

时间:2018-11-23 09:12:39

标签: javascript twitter-bootstrap

我不知所措,试图获取列表中列表项的URL值并将其添加到“添加到购物车”按钮中,以便当用户选择“ 20个项目”项时,其URL添加到“添加到购物车”中按钮网址。

例如,如果列表项目“ 20个项目”(<li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>)的“添加到购物车”按钮应位于链接https://www.example.com/?add-to-cart=193&variation_id=35435

之后

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="dropdown-menu">
    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>
    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>
    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>
    <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>
</ul>
<a href="" class="btn btn-danger">Add to cart</a>

不幸的是,目前我对javascript的理解真的很差,所以我不知道该如何独自执行。我将不胜感激。

2 个答案:

答案 0 :(得分:4)

点击锚标记,获取其href并使用jquery attr更新Add to Cart锚标记的href

$('.dropdown-menu').on('click', 'a', function(e) {
  e.preventDefault();
  $('#test').attr('href', $(this).attr('href'))

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="dropdown-menu">
  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35435">20 items</a></li>
  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35436">30 items</a></li>
  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35437">50 items</a></li>
  <li><a href="https://www.example.com/?add-to-cart=193&variation_id=35438">100 items</a></li>
</ul>
<a id='test' href="" class="btn btn-danger">Add to cart</a>

答案 1 :(得分:1)

首先,您应该使用一些后端脚本来使用GET或POST获取参数。 例如,如果我使用PHP,我的代码将是这样

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="dropdown-menu">
    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35435">20 items</a></li>
    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35436">30 items</a></li>
    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35437">50 items</a></li>
    <li><a href="https://www.example.com/cart.php?add-to-cart=193&variation_id=35438">100 items</a></li>
</ul>
<a href="" class="btn btn-danger">Add to cart</a>

在cart.php上,您必须使用$ _GET [“ add-to-cart”]&$ _GET [“ variation_id”]来获取两个变量

此方案将用户重定向到其他页面。如果您要执行操作而不进行重定向,也可以使用ajax