0

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>
Satpal
  • 132,252
  • 13
  • 159
  • 168
Drunken M
  • 2,013
  • 2
  • 11
  • 18

3 Answers3

1

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>
Satpal
  • 132,252
  • 13
  • 159
  • 168
  • Hi! Can you help me to find the workaround for the continued question from this post? The question is [here](https://stackoverflow.com/questions/52289933/jquery-how-to-make-this-selector-fires-multiple-classes). Thanks you. – Drunken M Sep 12 '18 at 12:55
0

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">');        
    });
iPraxa Inc
  • 548
  • 3
  • 6
0

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');
Lowell Ed Llames
  • 197
  • 8