Jquery 鼠标单击三个按钮上的事件

假设我在页面的div中有以下三个按钮：

<div class="action_buttons">
    <button class="btn btn-sm btn-outline-primary add_to_cart">Add to Cart</button>
    <button style="display:none;" class="btn btn-sm text-success added"><i class="fas fa-fw fa-check"></i> Added</button>
    <button style="display:none;" class="btn btn-sm text-danger remove"><i class="fas fa-fw fa-times"></i> Remove</button>
</div>

这段代码的问题是，当我单击Remove时，因为该按钮上有一个mouseleave事件显示添加了类的按钮，所以在单击Remove后该按钮仍然可见。我只希望在单击“删除”时，具有“将\添加到\购物车”类的按钮可见

---

提前感谢您的帮助。

有点棘手，但是您可以使用一个var来修复它，该var检查是否单击了删除，如果单击了返回，则不执行

mouseleave

事件函数内容

请参阅下面的代码片段：

var removeClicked=false；
$（文档）。在（'单击'，'上。将`添加到`购物车'，函数（e）{
e、 预防默认值（）；
$（this.hide（）；
$（this）.closest（'div'）.find（'.added'）.show（）；
});
$（文档）.on（'mouseenter'，'added'，函数（e）{
$（this.hide（）；
$（this）.closest（'div'）.find（'.remove'）.show（）；
});
$（文档）.on（'mouseleave'，'.remove'，函数（e）{
如果（删除单击）{
//重置点击
removeClicked=false
返回；
}
$（this.hide（）；
$（this）.closest（'div'）.find（'.added'）.show（）；
});
$（文档）.on（'click'，'remove'，函数（e）{
e、 预防默认值（）；
removeClicked=true；
$（this.hide（）；
$（this）.closest（'div'）.find（'.add_to_cart'）.show（）；
$（this.parent（'div'）.find（'.added'）.hide（）；
});
.hide{
显示：无；
}

添加到购物车
补充
去除
添加到购物车
补充
去除
您可以在按钮上添加一些
标志（数据属性）
，这将帮助您删除按钮，并在必要时删除该属性

演示代码：


$（文档）。在（'单击'，'上。将'添加到'购物车'，函数（e）{
e、 预防默认值（）；
$（'.remove'）.attr（'单击'，''）；//删除attr
$（this.hide（）；
$（this）.closest（'div'）.find（'.added'）.show（）；
});
$（文档）.on（'mouseenter'，'added'，函数（e）{
$（this.hide（）；
$（this）.closest（'div'）.find（'.remove'）.show（）；
});
$（文档）.on（'mouseleave click'，'.remove'，函数（e）{
如果（e.type==“mouseleave”）{
//除非attr为“是”，否则不会进入内部
如果（$（this.attr（'clicked'）！='yes'）{
$（“.element”，this.hide（）；
$（this.hide（）；
$（this）.closest（'div'）.find（'.added'）.show（）；
}
}否则，如果（例如，键入==“单击”）{
console.log（“我在”）
$（this.attr（'clicked'，'yes'）；//添加了attr
$（this.hide（）；
$（this）.closest（'div'）.find（'.add_to_cart'）.show（）；
}
});

添加到购物车
补充
去除
您只是在
的
鼠标删除
上缺少了一个条件。请删除
元素。检查
.add\u to\u cart
是否隐藏，然后仅显示
.added
元素

请参见下面的代码段：


$（文档）。在（'单击'，'上。将'添加到'购物车'，函数（e）{
e、 预防默认值（）；
$（this.hide（）；
$（this）.closest（'div'）.find（'.added'）.show（）；
});
$（文档）.on（'mouseenter'，'added'，函数（e）{
$（this.hide（）；
$（this）.closest（'div'）.find（'.remove'）.show（）；
});
$（文档）.on（'mouseleave'，'.remove'，函数（e）{
$（this.hide（）；
/*添加以下条件以显示.ADD元素*/
if（$（this.nexist（'div'））.find（'.add_to_cart'）是（“：hidden”））{
$（this）.closest（'div'）.find（'.added'）.show（）；
}
});
$（文档）.on（'click'，'remove'，函数（e）{
e、 预防默认值（）；
$（this.hide（）；
$（this）.closest（'div'）.find（'.add_to_cart'）.show（）；
});

添加到购物车
补充
去除
尽量将逻辑和风格分开。用javascript更改
内联样式总是变得很难维护。尝试使用CSS处理与样式相关的事情。你可以用CSS解决这个问题，只需添加和删除一个属性


$（文档）。在（'单击'，'上。将'添加到'购物车'，函数（e）{
e、 预防默认值（）；
$（this）.closest（'div'）.attr（'data-js-added'，'true'）；
});
$（文档）.on（'click'，'remove'，函数（e）{
e、 预防默认值（）；
$（this）.closest（'div'）.removeAttr（'data-js-added'）；
});
。添加，
去除
[data js added=“true”]。将添加到购物车，
[data js added=“true”]：hover.added{
显示：无；
}
[data js added=“true”]添加，
[数据js added=“true”]：悬停。删除{
显示：块；
}

添加到购物车
补充
去除
建议：这也可能只是一个按钮

根据事件和按钮的当前“状态”（它具有的类），它只生成四个条件，只需要一个事件处理程序

我认为代码更容易阅读和维护


let buttonContent=[
“添加到购物车”，
“添加”，
“删除”
];
$（文档）。在（“单击鼠标删除”和“.action_buttons.btn”，
功能（事件）{
让$this=$（this）
//条件
//单击“添加到购物车”
如果（event.type==“单击”&&$this.is（“.add\u to\u cart”））{
$this.addClass（“添加文本成功”）；
$this.removeClass（“btn大纲主添加到购物车”）；
$this.html（buttonContent[1]）；
返回；
}
//单击“删除”
如果（event.type==“单击”&&$this.is（“.remove”））{
$this.removeClass（“文本成功添加文本危险删除”）；
$this.addClass（“btn大纲主添加到购物车”）；
$this.html（buttonContent[0]）；
返回；
}
//鼠标进入
如果（event.type==“mouseenter”&&$this.is（“.added”））{
$this.toggleClass（“文本成功添加文本危险删除”）；
$this.html（buttonContent[2]）；
返回；
}
//老鼠叶子
if（event.type==“mouseleave”&&$this.is（“.remove”））{
$this.toggleClass（“文本成功添加文本危险删除”）；
$this.html（buttonContent[1]）；
}
}
);

添加到购物车
在JS的第一行，是否应该是
。将_添加到_购物车
而不是
将_添加到_购物车
？看来你错过了“.”格伦卡彭特，那是朱
$(document).on('click', '.add_to_cart', function(e){
    e.preventDefault();

    $(this).hide();
    $(this).closest('div').find('.added').show();
});

$(document).on('mouseenter', '.added', function(e){
    $(this).hide();
    $(this).closest('div').find('.remove').show();
});

$(document).on('mouseleave', '.remove', function(e){
    $(this).hide();
    $(this).closest('div').find('.added').show();
});

$(document).on('click', '.remove', function(e){
    e.preventDefault();

    $(this).hide();
    $(this).closest('div').find('.add_to_cart').show();
});