单击附加多个项目

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

事情是......当我点击“.item”时，我想添加class .selected。如果选中该项目，图像需要隐藏并放置一个图标。我无法修改 html，所以我添加了附加的图标。

如果我再次点击，商品已经class选中，产品图片需要再次出现，图标消失，但是如果我点击，它会正确添加，如果我再次点击，它删除它并显示回图像，但是如果我再次单击，图标出现两次，然后我再次单击，图像显示正常并且图标消失，但是如果我再次单击，图标出现三次等等，什么我做错了吗？为什么要追加两次？

谢谢

Answer 1

您不能提供 HTML 作为要删除的属性，您需要 select 元素本身。您还可以对代码进行一些优化。试试这个：

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>

单击附加多个项目

Appending multiple items on click

jquery

append

click

toggle