Функция динамического изменения значков jQuery

Question

У меня есть это гнездо ссылок со значком на нем.При нажатии на ссылку значок, связанный с ней, изменится на изображение загрузки, чтобы показать, что ссылка активна.

Проблема заключается в повторном щелчке или более, изображение загрузки не изменится назначок и отображать несколько загружаемых изображений.

Как сделать так, чтобы показывалось только одно загружаемое изображение, и вернуть предыдущий нажатый значок.

HTML и скрипт

$('.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

Пожалуйста, попробуйте это: -

$('.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">');        
    });

Answer 2

попробуйте это. Не заменяйте его атрибутом класса, добавьте его после замены тега 'i'.

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

Answer 3

Проблема с вашей реализацией в том, что .not($icons) не исключает cuurent img элемент, так как .replaceWith() возвращает исходный элемент, который удален из DOM.

Кэшируйте ссылку на img.active и используйте ее для замены элемента позже.

$('.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>

---

Создайте объект jQuery и используйте его с функциями .not() и .replaceWith().

$('.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>