добавляющих несколько элементов по щелчку

Question

У меня есть эта функция JQuery:

HTML:

<div class="item"> 
    <div class="imageWrap"> 
     <img class="img-responsive" src="images/wine_large.png" alt=""/> 
    </div> 
</div> 

ЯШИ:

function reserve_selected() { 
    $('.myReserve').on('click', ".item", function(e) { 
     e.preventDefault(); 
     $(this).toggleClass('selected'); 
     if($(this).hasClass('selected')) { 
      $(this).find('img').css("display", "none"); 
      $(this).find('.imageWrap').append('<span class="icon-selected-tick"></span>'); 
     } else { 
      $(this).find('.imageWrap').remove('<span class="icon-selected-tick"></span>'); 
      $(this).find('img').css("display", "block"); 
     } 
    }); 
} 

Дело в том, .... когда я нажимаю на». item ", я хочу добавить класс .selected. Если элемент выбран, изображение нужно скрыть и вместо этого поместить значок. Я не могу изменить html, поэтому добавляю значок с добавлением.

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

Спасибо

Answer 1

Вы не можете предоставить HTML как свойство быть удалены, вам нужно выбрать сам элемент. Также есть несколько оптимизаций, которые вы можете внести в код. Попробуйте это:

function reserve_selected() { 
 
    $('.myReserve').on('click', ".item", function(e) { 
 
    e.preventDefault(); 
 
    var $el = $(this).toggleClass('selected'); 
 

 
    if ($el.hasClass('selected')) { 
 
     $el.find('img').hide() 
 
     $el.find('.imageWrap').append('<span class="icon-selected-tick">Tick</span>'); 
 
    } else { 
 
     $el.find('.imageWrap span').remove(); 
 
     $el.find('img').show() 
 
    } 
 
    }); 
 
} 
 

 
reserve_selected();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myReserve"> 
 
    <div class="item"> 
 
    <div class="imageWrap"> 
 
     <img class="img-responsive" src="images/wine_large.png" alt="" /> 
 
    </div> 
 
    </div> 
 
</div>