Скрытие div на основе [data-counter]

Question

Я пытаюсь скрыть значок корзины на моем веб-сайте, когда корзина пуста. Я не эксперт в jQuery, но я знаю основы.

$(document).ready(function() {
    if($(".button-icon[data-counter]").is() == "0"){    
        $(".menu-cart-wrapper").hide();
    }else{    
        $(".menu-cart-wrapper").show();
    }
});

```

<div class="menu-cart-wrapper">
  <a id="menu-cart__toggle_button" href="#">
    <span class="button-text"><span class="woocommerce-Price-amount amount">0&nbsp;<span class="woocommerce-Price-currencySymbol">kr</span></span></span>
    <span class="button-icon" data-counter="0">
      <i class="eicon" aria-hidden="true"></i>
      <span "screen-only">Cart</span>
    </span>
  </a>
</div>

При этом кнопка всегда скрыта, и я не могу понять, почему.

Я также пробовал с классом span "woocommerce-priz et c". и добавьте html после с == "0", но это тоже не сработало.

Plz help!

Answer 1

$(document).ready(function() {
    if($(".button-icon[data-counter]").data('counter') == "0"){    
        $(".menu-cart-wrapper").hide();
    }else{    
        $(".menu-cart-wrapper").show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-cart-wrapper">
  <a id="menu-cart__toggle_button" href="#">
    <span class="button-text"><span class="woocommerce-Price-amount amount">0&nbsp;<span class="woocommerce-Price-currencySymbol">kr</span></span></span>
    <span class="button-icon" data-counter="1">
      <i class="eicon" aria-hidden="true"></i>
      <span "screen-only">Cart</span>
    </span>
  </a>
</div>

Answer 2

если вы измените счетчик данных с 1 на 0, он будет скрыт:

$(document).ready(function() {

var sp=document.getElementsByClassName('button-icon')[0].getAttribute('data-counter'); 

    if(sp === '0'){      
        $(".menu-cart-wrapper").hide();
    }else{    
        $(".menu-cart-wrapper").show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-cart-wrapper">
  <a id="menu-cart__toggle_button" href="#">
    <span class="button-text"><span class="woocommerce-Price-amount amount">0&nbsp;<span class="woocommerce-Price-currencySymbol">kr</span></span></span>
    <span class="button-icon" data-counter="1">
      <i class="eicon" aria-hidden="true"></i>
      <span "screen-only">Cart</span>
    </span>
  </a>
</div>