Question

点击后，我试图添加一个div。但是问题是，当我单击按钮时，再添加一个jquery代码，再次添加它。

它的工作方式应类似于单击.box然后附加.fast_icon div二次单击.append不再附加，因为已经附加了.fast_icon

请注意，jquery代码应该像这样工作。

当您单击.box div jQuery代码时，请参阅data-id， HTML

<div class="box" id="box1" data-id="1"></di> 

var ID = $(this).attr("data-id");

并检查.is-active是否有相同的ID $(".ic"+ID).hasClass("is-active");

如果没有is-active类，请附加<div class="fast_icon"></div>

现在这是我的问题。

当您第二次单击.box div时，代码再次追加<div class="fast_icon"></div>，但不需要这样做，因为我们在相同的ID之前单击，因此将其附加在相同的ID中。

我必须这样尝试

$(document).ready(function() {
  $("body").on("click", ".box", function(e) {
    var ID = $(this).attr("data-id"); 
    //$(".fast_icon_answer").removeclass("is-active"); 
    if (!$(".ic"+ID).hasClass("is-active")) {
          setTimeout(function() {
        $(".ic" + ID).addClass("is-active");
      }, 10);
      $(".ic" + ID).append(
        '<div class="fast_icon"></div>'
      );
        } else {
          $(".fast_icon_answer").removeClass("is-active");
      $(".fast_icon").remove();
        }
  });
  $(document).bind( "mouseup touchend", function(e){
     var container = $('.is-active');
       if (!container.is(e.target) && container.has(e.target).length === 0) {
         $(".fast_icon_answer").removeClass("is-active");
         $(".fast_icon").remove();
        }
    }); 
});

这是来自codepen.io的 DEMO

Answer 1

我将if (!$(".ic" + ID).hasClass("is-active"))中的.unbind(...)条件修改为!container.is(e.target) && container.has(e.target).length === 0)

如果我对您的理解正确，那应该就是您所需要的

$(document).ready(function() {
  $("body").on("click", ".box", function(e) {
    var ID = $(this).attr("data-id");
    //$(".fast_icon_answer").removeclass("is-active");
    if (!$(".ic" + ID).hasClass("is-active")) {
      setTimeout(function() {
        $(".ic" + ID).addClass("is-active");
      }, 10);
      $(".ic" + ID).append('<div class="fast_icon"></div>');
    }
  });
  $(document).bind("mouseup touchend", function(e) {
    var container = $(".is-active");
    if (!$(e.target).hasClass('box') || 
       !$(e.target).find('.fast_icon').length) {
      $(".fast_icon_answer").removeClass("is-active");
      $(".fast_icon").remove();
    }
  });
});

更新

删除了.box单击事件中的else块

Answer 2

只需用下面的代码替换js代码

$(document).ready(function() {
  $("body").on("click", ".box", function(e) {
    var ID = $(this).attr("data-id");
    //$(".fast_icon_answer").removeclass("is-active");
    if (!$(".ic" + ID).hasClass("is-active")) {
      setTimeout(function() {
        $(".ic" + ID).addClass("is-active");
      }, 10);
      $(".ic" + ID).append('<div class="fast_icon"></div>');
    } else {
     // $(".fast_icon_answer").removeClass("is-active");
     // $(".fast_icon").remove();
    }
  });
  $(document).unbind("mouseup touchend", function(e) {
    var container = $(".is-active");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $(".fast_icon_answer").removeClass("is-active");
      $(".fast_icon").remove();
    }
  });
});

jQuery只需单击一下即可追加

2 个答案: