How to hide the button, that loads more elements on click if items of that type are less then 6?

user_17314416 0
Viewed 26

I try to do it like that

 var matched = $(".gallery_thumbs .woocommerce-product-gallery__image");
 console.log(matched.length);

if ((matched < 7) && ($(window).width() > 1024)) {
  $('button.gallery_thumbs-toggle').hide();
}

I tried the script by alert

if (($(window).width() > 1024)) {
  alert(1);
}

is working fine, but that doesn't work

if ((matched < 7)){
alert(1);
}

console.log(matched.length) is showing 2, like it is, so it's less then 7, what's wrong?

jquery javascript
2 Answers

You have to check the length. So: if (matched.length < 7) instead of if (matched < 7)

function addSpan() {
  var matched = $("span");
  console.log(matched.length);

  if (matched.length < 7) {
    $("#container").html($("#container").html() + "<span>I'm a Span. </span>")
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <button onclick="addSpan()">Add a Span</button>
  <span>I'm a Span. </span>
</div>

user_166347380 

<html>
  <head><title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="container">
      <button id="addSpan">Add a Span</button>
      <span>I'm a Span. </span>
    </div>
    <script>
    $('#addSpan').on('click', function(event){
       if($('span').length<7)
       {
          $('#container').append("<span>I'm a Span. </span>");
       }
    });
    </script>
  </body>
</html>

user_187716600
Related