我试图在点击后附加一个 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
最佳答案
我在 .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
关于javascript - Jquery 需要一键追加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53478933/