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”时，我想添加类.selected。如果选择了该项目，则图像需要隐藏，而是放置一个图标。我无法修改html，所以我添加了带附加的图标。

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

谢谢

Answer 1

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

＆＃13;

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();

＆＃13;

<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>

＆＃13;

单击时附加多个项目

1 个答案: