Как в правильно задать условие на кол-во скрытых элементов с rate:hidden?

Question

Есть перечень элементов с классом rate. Все таких элементов 24, но выводятся они по 8. При клике на кнопку "показать еще" открываются еще 8 с помощью slideDown.

Мне нужно измерять количество скрытых элементов rate при помощи rate:hidden, и если их 0, то убирать кнопку "показать еще".

Простыми словами, есть список товаров которые открываются при клике на кнопку "ещё". Нужно чтобы в конце списка кнопка "ещё" исчезала.

Совсем не знаю как правильно задать такое условие. Или нужно функцию какую то прописывать?

$(document).ready(function () {

    $('.rate').slice(0, 8).show();

    $(function (e) {
        if ($('.rate:hidden').length == 0) {
            $('.more-button').css("display", "none");
            $('.allert').css("display", "block");
        } else {
            $('.more-button').on('click', function (e) {
                e.preventDefault();
                $('.rate:hidden').slice(0, 8).slideDown();
            });
        };
    });

});

Answer 1

Необходимо отслеживать количество элементов через length, а так же перенести часть действий внутрь функции отслеживания нажатия кнопки:

    $(document).ready(function(){
        $('.rate').hide();
        $('.rate').slice(0, 8).show();
        $('.allert').hide();

        $('.more-button').on('click', function(e) {
            e.preventDefault();
            if ($('.rate:hidden').length <= 8) {
                $('.more-button').css("display", "none");
                $('.allert').css("display", "block");
                $('.rate:hidden').slice(0, 8).slideDown();
            } else {
                $('.rate:hidden').slice(0, 8).slideDown();
            }
        });
    });

    .rate{
        color: #fe8e11;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rate">1</div>
<div class="rate">2</div>
<div class="rate">3</div>
<div class="rate">4</div>
<div class="rate">5</div>
<div class="rate">6</div>
<div class="rate">7</div>
<div class="rate">8</div>
<div class="rate">9</div>
<div class="rate">10</div>
<div class="rate">11</div>
<div class="rate">12</div>
<div class="rate">13</div>
<div class="rate">14</div>
<div class="rate">15</div>
<div class="rate">16</div>
<div class="rate">17</div>
<div class="rate">18</div>
<div class="rate">19</div>
<div class="rate">20</div>
<div class="rate">21</div>
<div class="rate">22</div>
<div class="rate">23</div>
<div class="rate">24</div>
<div class="allert">Закончились товары</div>

<button class="more-button">Тык</button>

Answer 2

$("#show-more").click(function(){
     $(".rate:hidden:lt(8)").slideDown();
     if($(".rate:hidden").length == 0){
         $(this).hide();     
     }
 });

#wrapper :nth-child(n+9){  
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="rate">1</div>
  <div class="rate">2</div>
  <div class="rate">3</div>
  <div class="rate">4</div>
  <div class="rate">5</div>
  <div class="rate">6</div>
  <div class="rate">7</div>
  <div class="rate">8</div>
  <div class="rate">9</div>
  <div class="rate">10</div>
  <div class="rate">11</div>
  <div class="rate">12</div>
  <div class="rate">13</div>
  <div class="rate">14</div>
  <div class="rate">15</div>
  <div class="rate">16</div>
  <div class="rate">17</div>
  <div class="rate">18</div>
  <div class="rate">19</div>
  <div class="rate">20</div>
</div>

<button id="show-more">еще</button>

БЛОГ НА HUSL

Как в правильно задать условие на кол-во скрытых элементов с rate:hidden?

Ответы (2 шт):