Jquery изменяет значки динамически при нажатии функции

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

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

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

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>
0
0
1 183
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Проблема с вашей реализацией заключается в том, что .not($icons) не исключает текущий элемент 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>

Привет! Можете ли вы помочь мне найти обходной путь для продолжения вопроса из этого сообщения? Вопрос здесь. Спасибо вам.

Drunken M 12.09.2018 14:55

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

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

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

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

Другие вопросы по теме