如果启用按钮，则执行此 onclick 事件

Posted 2023-03-05

【中文标题】如果启用按钮，则执行此 onclick 事件

【英文标题】：If button enabled, then do this onclick event

【发布时间】：2019-10-09 17:55:39

【问题描述】：

我想在单击“添加到购物车按钮”时显示一个弹出窗口（但仅当按钮处于活动状态时！）所以我认为我可以使用包装按钮的 div 将类从“禁用”更改为“启用”我使用了 jquery，但如果它是 jquery 或纯 javascipt 并不那么重要。

我让它在 codepen 上运行，但在我的网站上不起作用？ 见codepen：https://codepen.io/Molin449/pen/mYXPXv

知道我做错了什么吗？

$('.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled .single_add_to_cart_button').click(function()
  $("#CartPopup").css("display", "block");
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!--The popup div-->
<div id="CartPopup" class="CartPopup"></div>

<!--This is the div that changes between disabled and enabled-->
<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">

<!--The button where i want the onclick event (only when active)-->
<button type="submit" class="single_add_to_cart_button">Tilføj til kurv</button> <a href="https://www.profiltech.dk/kurv/" class="added_to_cart wc-forward" title="Se kurv">Se kurv</a></div>

【问题讨论】：

不要在父元素上设置类，而是将disabled 属性添加到button 本身。然后不能从中引发任何事件

我无法编辑 html，因为它是一个使用 woocommerce 作为网上商店的 wordpress 网站，否则我肯定会这样做。

【参考方案1】：

更新

在 Wordpress/Wooccommerce 上，您首先需要明确使用 jQuery() 就绪事件（嵌入短和 $）...

现在在 Woocommerce 上，您可以使用 disabled 类（正如 @RoryMcCrossan 在他的评论中建议的那样），所以 当您的按钮没有类disabled，它将能够显示光弓。

jQuery( function($)
    $('.single_add_to_cart_button').click(function()
        if( ! $(this).hasClass('disabled') ) 
            $("#CartPopup").css("display", "block");
        
    );
);

#CartPopup
  display:none;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  height:100%;
  width:100%;
  top:0px;
  left:0px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!--The popup div-->
<div id="CartPopup" class="CartPopup"></div>

<!--This is the div that changes between disabled and enabled-->
<div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">

<!--The button where i want the onclick event (only when active)-->
<button type="submit" class="single_add_to_cart_button">Tilføj til kurv</button> <a href="https://www.profiltech.dk/kurv/" class="added_to_cart wc-forward" title="Se kurv">Se kurv</button></div>

如果你的按钮是这样的，将无法工作：

<button type="submit" class="single_add_to_cart_button disabled">Tilføj til kurv</button>

【讨论】：

太棒了，部分成功了！我将选择器更改为仅使用“.single_add_to_cart_button”，然后它完美地工作了！非常感谢！