如果启用了按钮,则执行此 onclick 事件
If button enabled, then do this onclick event
我想在单击 "add to cart button" 时显示一个弹出窗口(但仅当按钮处于活动状态时!)所以我想我可以使用 div 来包装按钮,从而改变 class 从 "disabled" 到 "enabled" 我使用了 jquery 但如果它是 jquery 或纯 javascipt 就没那么重要了。
我让它在 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>
已更新
在 Wordpress/Wooccommerce 上,您首先需要明确地使用 jQuery()
就绪事件(嵌入缩写 $
)…
现在在 Woocommerce 上,您可以使用 disabled
class (@RoryMcCrossan 在他的评论中建议), 所以 当你的按钮没有 class 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>
我想在单击 "add to cart button" 时显示一个弹出窗口(但仅当按钮处于活动状态时!)所以我想我可以使用 div 来包装按钮,从而改变 class 从 "disabled" 到 "enabled" 我使用了 jquery 但如果它是 jquery 或纯 javascipt 就没那么重要了。
我让它在 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>
已更新
在 Wordpress/Wooccommerce 上,您首先需要明确地使用 jQuery()
就绪事件(嵌入缩写 $
)…
现在在 Woocommerce 上,您可以使用 disabled
class (@RoryMcCrossan 在他的评论中建议), 所以 当你的按钮没有 class 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>