Question

我想在单击“添加到购物车按钮”（但仅在按钮处于活动状态时）时显示弹出窗口，所以我认为我可以使用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>

Answer 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>

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

1 个答案: