使用 jquery 单击更改 div 内容和 url

Question

我对 jquery 很陌生。

我只需单击即可更新 div 内容和 link url。

我正在处理这段代码。

    <ul>
    <li><a href="#">.50</a></li>
    <li><a href="#">.50</a></li>
    <li><a href="#">.50</a></li>
    <li><a href="#">.50</a></li>
    </ul>

我需要根据以上 link 点击更新价格 div。

    <div class="price">[=14=].00</div>

    <a class="buy" href="">Pay Now</a>

谢谢

Answer 1

使用 .class 选择器和 .attr() 更改 href。

$('ul > li').click(function(){
   $('.price').html($(this).text());
   $('.buy').attr('href', 'http://google.com');
});

$('ul > li').click(function(){
   $('.price').html($(this).text());
   $('.buy').attr('href', 'http://google.com');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="#">.50</a></li>
    <li><a href="#">.50</a></li>
    <li><a href="#">.50</a></li>
    <li><a href="#">.50</a></li>
    </ul>

<div class="price">[=12=].00</div>

<a class="buy" href="">Pay Now</a>

Answer 2

你可以试试

$(".price").on('click', function(){
    var clickedPrice = $(this).data('price');
    $('#result_price').html("$" + clickedPrice);
  });

<ul>
  <li class="price"><a href="#" data-price="9"></a></li>
  <li class="price"><a href="#" data-price="5"></a></li>
  <li class="price"><a href="#" data-price="3"></a></li>
</ul>
<div id="result_price">[=11=]</div>

Answer 3

您可以根据ul > li > a点击更新价格div。试试下面的代码

$(document).on('click', 'ul > li > a', function(){
    $('.price').text($(this).text());
});

$(document).on('click', 'ul > li > a', function(){
    $('.price').text($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><a href="#">.50</a></li>
    <li><a href="#">.50</a></li>
    <li><a href="#">.50</a></li>
    <li><a href="#">.50</a></li>
</ul>
<div class="price">[=12=].00</div>
<a class="buy" href="">Pay Now</a>

谢谢。

使用 jquery 单击更改 div 内容和 url

Change div content and url on single click using jquery

html

javascript

jquery

onclick

attr