Jquery秀隐藏不按预期工作？

Question

我有HTML结构，我需要显示/隐藏过滤元素。 我的用例是，在页面加载时，每个过滤器组应限制为3个过滤器元素，并可选择在单击+按钮时展开更多。 必须执行同样的操作才能在单击 - 按钮时仅显示前3个过滤器元素。 对于Ex。我有尺寸作为过滤器组和过滤器元素如S，M，L，XL，XXL。我想在页面加载和休息时只显示3个元素必须隐藏。点击+按钮后，应显示所有元素。 单击 - 按钮，仅显示前3个元素（S，M，L）。下面是我试过的代码示例和Jquery，但它没有来。

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".showLess").hide();
  // used to hide elements which are > 3 in numbers
  $('.list-group-item label:lt(3)').next().hide();
  // On click of + button need to show rest of the filter elements
  $('.loadMore').click(function() {
    $(".showLess").show();
    $('.list-group-item label:lt(5)').next().show();
  });
  // On click of - button need to show only top 3 filter elements
  $('.showLess').click(function() {
    $(".showLess").hide();
    $('.list-group-item label').closest().not(':lt(3)').hide();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
  <a class="list-group-item fltrHdng">Size</a> 
  <div class="list-group-item">
    <div id="filter-group10" class="cf">

      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="59">S
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="60">M
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">L
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">XL
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">XXL
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more" style="display: inline-block;">-</button>
    </div>
  </div>
  <a class="list-group-item fltrHdng">FABRIC</a> 
  <div class="list-group-item">
    <div id="filter-group21" class="cf">
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="144">Chiffon
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="145">Corduroy
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Cotton
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Wool
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Silk
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more" style="display: inline-block;">-</button>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在父级内查找并对要显示或隐藏的数字进行切片，然后显示/隐藏。

  $(".showLess").hide();
  $('.cf').each(function() {
    $(this).find('.checkbox').slice(3).hide();
  })
  $('.loadMore').on('click', function() {
    $(this).hide().next().show();
    $(this).parent().find('.checkbox').show();
  })
  $('.showLess').on('click', function() {
    $(this).hide();
    $(this).prev().show();
    $(this).parent().find('.checkbox').slice(3).hide();
  })

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".showLess").hide();
  $('.cf').each(function() {
    $(this).find('.checkbox').slice(3).hide();
  })
  $('.loadMore').on('click', function() {
    $(this).hide().next().show();
    $(this).parent().find('.checkbox').show();
  })
  $('.showLess').on('click', function() {
    $(this).hide();
    $(this).prev().show();
    $(this).parent().find('.checkbox').slice(3).hide();
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
  <a class="list-group-item fltrHdng">Size</a> 
  <div class="list-group-item">
    <div id="filter-group10" class="cf">

      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="59">S
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="60">M
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">L
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">XL
      </label>
      <label class="checkbox cb_test" style="display: block;">
        <input name="filter[]" type="checkbox" value="61">XXL
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more" style="display: inline-block;">-</button>
    </div>
  </div>
  <a class="list-group-item fltrHdng">FABRIC</a> 
  <div class="list-group-item">
    <div id="filter-group21" class="cf">
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="144">Chiffon
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="145">Corduroy
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Cotton
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Wool
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Silk
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more" style="display: inline-block;">-</button>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，您正在调用$(".showLess").show();，因此它正在使用showLess类选择所有元素。你对列表做了同样的事情。您可以在CSS中添加和删除类，而不是在JavaScript中执行所有这些逻辑。

＆＃13;

＆＃13;

$(document).ready(function() {
  
  $('.loadMore, .showLess').click(function() {
    var btn = $(this);
    var isMore = btn.hasClass("loadMore")
    btn.closest(".list-group-item").toggleClass("active", isMore);
  });

  
});

＆＃13;

.showLess {
   display: none;  
}
.list-group-item > div > label {
    display: block;
}
.list-group-item > div > label:nth-of-type(1n+3) {
  display: none;
}


.list-group-item.active .showLess {
  display: block;
}
.list-group-item.active .loadMore {
  display: none;
}
.list-group-item.active > div > label:nth-of-type(1n+3) {
  display: block;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
  <a class="list-group-item fltrHdng">Size</a> 
  <div class="list-group-item">
    <div id="filter-group10" class="cf">

      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="59">S
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="60">M
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="61">L
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="61">XL
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="61">XXL
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>
    </div>
  </div>
  <a class="list-group-item fltrHdng">FABRIC</a> 
  <div class="list-group-item">
    <div id="filter-group21" class="cf">
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="144">Chiffon
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="145">Corduroy
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Cotton
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Wool
      </label>
      <label class="checkbox cb_test">
        <input name="filter[]" type="checkbox" value="146">Silk
      </label>
      <button class="loadMore" title="Load more">+</button>
      <button class="showLess" title="Load more">-</button>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果你真的想用JavaScript做，你的代码需要是这样的（未经测试）

$('.loadMore').click(function() {
    var btn = $(this);
    btn.siblings(".showLess").show();
    btn.hide();
    btn.parent().find("label").show();
  });
  // On click of - button need to show only top 3 filter elements
  $('.showLess').click(function() {
    var btn = $(this);
    btn.siblings(".loadMore").show();
    btn.hide();
    btn.parent().find("label:gt(3)").hide();
  });

Answer 3

$(document).ready(function() {
        $(".showLess").hide();
        // used to hide elements which are > 3 in numbers
        $('.list-group-item').each(function(){
            $(this).find('label :gt(2)').hide();
        })
        // On click of + button need to show rest of the filter elements
        $('.loadMore').click(function() {
            $(this).next().show();
            //$(this).hide();
            $(this).next().show();
            $(this).parent().find('label').show();
        });
        // On click of - button need to show only top 3 filter elements
        $('.showLess').click(function() {
            $(this).hide();
            $(this).parent().find('label').not(':lt(3)').hide();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list-group cat_fltr">
    <a class="list-group-item fltrHdng">Size</a>
    <div class="list-group-item">
        <div id="filter-group10" class="cf">

            <label class="checkbox cb_test">
                <input name="filter[]" type="checkbox" value="59">S
            </label>
            <label class="checkbox cb_test" style="display: block;">
                <input name="filter[]" type="checkbox" value="60">M
            </label>
            <label class="checkbox cb_test" style="display: block;">
                <input name="filter[]" type="checkbox" value="61">L
            </label>
            <label class="checkbox cb_test" style="display: block;">
                <input name="filter[]" type="checkbox" value="61">XL
            </label>
            <label class="checkbox cb_test" style="display: block;">
                <input name="filter[]" type="checkbox" value="61">XXL
            </label>
            <button class="loadMore" title="Load more">+</button>
            <button class="showLess" title="Load more" style="display: inline-block;">-</button>
        </div>
    </div>
    <a class="list-group-item fltrHdng">FABRIC</a>
    <div class="list-group-item">
        <div id="filter-group21" class="cf">
            <label class="checkbox cb_test">
                <input name="filter[]" type="checkbox" value="144">Chiffon
            </label>
            <label class="checkbox cb_test">
                <input name="filter[]" type="checkbox" value="145">Corduroy
            </label>
            <label class="checkbox cb_test">
                <input name="filter[]" type="checkbox" value="146">Cotton
            </label>
            <label class="checkbox cb_test">
                <input name="filter[]" type="checkbox" value="146">Wool
            </label>
            <label class="checkbox cb_test">
                <input name="filter[]" type="checkbox" value="146">Silk
            </label>
            <button class="loadMore" title="Load more">+</button>
            <button class="showLess" title="Load more" style="display: inline-block;">-</button>

        </div>
    </div>
</div>