Question

我正在使用wordpress。我试图隐藏产品页面上的添加到购物车按钮，直到客户回答所有问题。我使用的插件提供了自定义选项的选项。步骤1步骤2步骤3等等。当他们到达最后一步时，继续＆＃34;继续＆＃34;按钮取消激活/禁用，类更改为.owl-next按钮

所以我尝试使用该类作为触发器来显示当时添加到购物车按钮并隐藏它直到该类处于活动状态。到目前为止，我可以隐藏添加到购物车按钮，但我无法将添加到购物车显示。以下是我目前在标题中尝试过的代码。

<script>
var aVisible = $('.owl-next.button').css('display');
if (aVisible == 'none') {
}
</script>


<script>

if($('.owl-next.button').length){
   $('.single_add_to_cart_button.button.alt').hide();
}`enter code here`
</script>

<div class="owl-nav"><a class="owl-prev button">Back</a><a class="owl-next button disabled">Continue</a></div>
<button type="submit" name="add-to-cart" value="267" class="single_add_to_cart_button button alt">Add to cart</button>

最后一步的变化：

<div class="owl-nav"><a class="owl-prev button">Back</a><a class="owl-next button disabled">Continue</a></div>
<button type="submit" name="add-to-cart" value="267" class="single_add_to_cart_button button alt">Add to cart</button>

Answer 1

为该按钮添加一个监听器并检查是否有类disabled，然后显示您的按钮：

$(document).ready(function(){
   $(document).on('click', '.owl-next.button', function() {
     let aVisible = $(this).hasClass('disabled');
      if (aVisible) {
       $('.single_add_to_cart_button.button.alt').show();
       }
    });
});

.hasClass()正在检查您点击按钮的那一刻并返回一个bool然后当为true时将再次显示您的按钮。

修改根据php语法的错误，您必须：

如果您在php文件中包含该脚本，那么您将收到错误，您可以将<?php替换为<script>，将?>替换为</script> syntax error, unexpected '(', expecting variable (T_VARIABLE) or '$'

或者使用如下语法：

jQuery(document).ready(function(){ jQuery(document).on('click', '.owl-next.button', function() { let aVisible = jQuery(this).hasClass('disabled'); if (aVisible) { jQuery('.single_add_to_cart_button.button.alt').show(); } }); });

这将避免与php文件冲突。

如果我换入并置于标题中，我会在控制台中第一次在脚本中出现两行TypeError：$不是函数

请记住，始终要在脚本的头部包含第一个JQuery库，这样就不会出错。

如果仍出现错误，请将其包装：

jQuery(document).ready(function($){ $(document).on('click', '.owl-next.button', function() { let aVisible = $(this).hasClass('disabled'); if (aVisible) { $('.single_add_to_cart_button.button.alt').show(); } }); });

这种方式应该有效，来源jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function

编辑2： 从wordpress stackexchange开始，以其他方式包装document.ready似乎更好：

(function($) { $('.owl-next.button').click(function() { let aVisible = $(this).hasClass('disabled'); if (aVisible) { $('.single_add_to_cart_button.button.alt').show(); } }); })(jQuery);

如果存在其他类，则隐藏特定DIV类

1 个答案: