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

Question

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

所以我试图使用该类作为触发器来显示当时添加到购物车按钮并隐藏它直到该类处于事件状态。到目前为止，我能够隐藏添加到购物车按钮，但我无法让添加到购物车显示。以下是我目前在 header 中尝试的代码。

<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 值，然后当为真时将再次显示您的按钮。

编辑: 根据 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 文件发生冲突。

if i wrap in and place in header i get in console firs two lines in script TypeError: $ is not a function

请记住始终在脚本开头包含第一个 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);