Raka Raka - 1 month ago 7
HTML Question

Change div content and url on single click using jquery

I am very new to jquery.

I just need to update div content and link url on single click.

here I am working on this code.

<ul>
<li><a href="#">$14.50</a></li>
<li><a href="#">$15.50</a></li>
<li><a href="#">$16.50</a></li>
<li><a href="#">$20.50</a></li>
</ul>


I need to update price div based on above link click.

<div class="price">$0.00</div>

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


Thanks

Answer

Use .class selector and .attr() to change the 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="#">$14.50</a></li>
    <li><a href="#">$15.50</a></li>
    <li><a href="#">$16.50</a></li>
    <li><a href="#">$20.50</a></li>
    </ul>

<div class="price">$0.00</div>

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