追加上点击

Question

多个项目，我有这样的jQuery的功能：

HTML：

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

JS：

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"); 
     } 
    }); 
} 

的事情是....当我点击了”。项目“，我想添加类.selected。如果选择该项目，图像需要隐藏，而不是放置一个图标。我无法修改html，因此我使用append添加图标。

如果我再次点击，并且该项目已选择了类，产品图像需要再次出现，并且图标消失，但是如果我单击，它会正确添加它，如果再次单击它，它会将其删除并显示回到图像，但如果我再次点击，图标出现两次，然后再次点击，图像显示正常，图标消失，但如果我再次点击，图标出现三次等等，我做错了什么？为什么要追加两次？

谢谢

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>