追加上點擊

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>