javascript - Jquery 需要一键追加

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

这是 DEMO 来自 codepen.io

Answer 1

我在 .unbind(...) 中修改了 if (!$(".ic"+ ID).hasClass("is-active")) 条件> 到 !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 block