How to replace elements within div on click using query?

Question

I have 2 separate div classes called demo-heart and demo-coal. The functionality I am trying to enable: when the user clicks on the fa-heart icon, it turns into fa-coal. When the user clicks on the fa-coal, it turns into fa-heart.

<div class = "demo-heart">
    <a href = "#" onclick="myFunction()">
        <i class="fa fa-heart fa-3x"></i>
    </a>
</div>

<div class = "demo-coal">
    <a href = "#" onclick="myFunction()">
        <i class="fa fa-coal fa-3x"></i>
    </a>
</div>

This is what I ahve so far and it doesn't seem to be working. But I also want it to be able to switch back to the original fa-heart when the user clicks on it. Any suggestions?

<script>
    function myFunction(){
        $(".demo-heart").html("<a href = '#'><i class='fa fa-coal fa-3x'></i></a>");
    }
 </script>

Instead of replacing the content of (every) div element, just toggle the class of the and i element. — Felix Kling
– Felix Kling, Commented Nov 11, 2013 at 15:43

Arun P Johny · Accepted Answer · 2013-11-11 15:44:10Z

3

Remove the inlined onclick handler, then use jQuery .click() to register the click handler

jQuery(function(){
    $('.fa').click(function(){
        $(this).toggleClass('fa-heart fa-coal')
    })
})

Demo: Fiddle

answered Nov 11, 2013 at 15:44

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arun P Johny Over a year ago

@TusharGupta yes a typo... fixed

Rory McCrossan · Accepted Answer · 2013-11-11 15:45:07Z

1

A much simpler solution is to have one HTML structure and toggle the class within it:

<div class="demo-heart">
    <a href="#">
        <i class="fa fa-heart fa-3x"></i>
    </a>
</div>

$('.demo-heart a').click(function(e) {
    e.preventDefault();
    $('i', this).toggleClass('fa-heart fa-coal');
});

Note that I removed the onClick attribute in favour of a cleaner jQuery event handler.

answered Nov 11, 2013 at 15:45

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Collectives™ on Stack Overflow

How to replace elements within div on click using query?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related