jQuery Change Icons Dynamically On Click Function

Question

I have this nest of links with icon on it. When a link was clicked, the icon associated with it will changed to a loading image to shown that the link is active.

The problem is on the second click or more, the loading image won't change back to the icon and display multiple loading images.

How to make it only show one loading image and revert the previous clicked icon.

The HTML and Script

$('.parent a').click(function(a) {
  a.preventDefault();
  var $icons = $(this).siblings('i');
  $($icons).replaceWith('<img class="active" src="https://cdn.dribbble.com/users/323893/screenshots/2077235/buffer.gif" width="30" height="30">');
  $('img.active').not($icons).replaceWith('<i class="typcn typcn-thumbup"></i>');
});

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

<div class="parent">
  <i class="typcn typcn-thumbup"></i>
  <a href="site1">first link</a>
</div>

<div class="parent">
  <i class="typcn typcn-thumbup"></i>
  <a href="site2">second link</a>
</div>

<div class="parent">
  <i class="typcn typcn-thumbup"></i>
  <a href="site3">third link</a>
</div>

<div class="parent">
  <i class="typcn typcn-thumbup"></i>
  <a href="site4">forth link</a>
</div>

Answer 1

try this. Don't replace it with a class attribute, add it after you replace the 'i' tag.

$($icons).replaceWith('<img src="https://cdn.dribbble.com/users/323893/screenshots/2077235/buffer.gif" width="30" height="30" />');
$($icons).addClass('active');

Answer 2

Problem with your implementation is that is .not($icons) is not excluding the cuurent img element as .replaceWith() returns the original element which is removed from the DOM.

Cache a reference to img.active and use it to replace the element later.

$('.parent a').click(function(a) {
  a.preventDefault();
  
  //Cache active images
  var images = $('img.active'); 

  //Replace i
  $(this).siblings('i').replaceWith('<img class="active" src="https://cdn.dribbble.com/users/323893/screenshots/2077235/buffer.gif" width="30" height="30">');

  //Replace images
  images.replaceWith('<i class="typcn typcn-thumbup"></i>');
});

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

<div class="parent">
  <i class="typcn typcn-thumbup"></i>
  <a href="site1">first link</a>
</div>

<div class="parent">
  <i class="typcn typcn-thumbup"></i>
  <a href="site2">second link</a>
</div>

<div class="parent">
  <i class="typcn typcn-thumbup"></i>
  <a href="site3">third link</a>
</div>

<div class="parent">
  <i class="typcn typcn-thumbup"></i>
  <a href="site4">forth link</a>
</div>

---

Create a jQuery object and use it with .not() and .replaceWith() function.

$('.parent a').click(function(a) {
  a.preventDefault();
  var image = $('<img class="active" src="https://cdn.dribbble.com/users/323893/screenshots/2077235/buffer.gif" width="30" height="30">');

  $(this).siblings('i').replaceWith(image);
  $('img.active').not(image).replaceWith('<i class="typcn typcn-thumbup"></i>');
});

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

<div class="parent">
  <i class="typcn typcn-thumbup"></i>
  <a href="site1">first link</a>
</div>

<div class="parent">
  <i class="typcn typcn-thumbup"></i>
  <a href="site2">second link</a>
</div>

<div class="parent">
  <i class="typcn typcn-thumbup"></i>
  <a href="site3">third link</a>
</div>

<div class="parent">
  <i class="typcn typcn-thumbup"></i>
  <a href="site4">forth link</a>
</div>

Answer 3

Please try this:-

$('.parent a').click(function(a){
        a.preventDefault();
        var $icons = $(this).siblings('i');
        $('img.active').not($icons).replaceWith('<i class="typcn typcn-thumbup"></i>'); 
        $($icons).replaceWith('<img class="active" src="https://cdn.dribbble.com/users/323893/screenshots/2077235/buffer.gif" width="30" height="30">');        
    });