Juqey Hide问题

Question

实际上我在计数超过5时显示+按钮，否则它会隐藏。当标签数量大于5时意味着如果计数为7则应显示＆＃34; + 2more＆＃34;这是正确的。当我点击+按钮意味着+按钮应该隐藏和 - 按钮应该出现，当我点击 - 按钮意味着+按钮应该隐藏是我想要的？

HTML code，

<div id="filter-group21" class="cf">
              <!--<input type="text" id="dino-search_21" placeholder="Search By FABRIC">  -->    
    <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="147" />
        Crepe</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="148" />
        Denim</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="162" />
        Silk</label>
    <button class="loadMore" title="Load more">+</button>
    <button class="showLess" title="Load more">-</button>
</ul>
</div>
<div id="filter-group22" class="cf">
              <!--<input type="text" id="dino-search_22" placeholder="Search By Brands">  -->    
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="149" />
        Go Colors</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="150" />
        Comfort Lady</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="151" />
        Morrio</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="152" />
        Twin Birds</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="153" />
        Fashion For U (FFU)</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="163" />
        Test</label>
    <button class="loadMore" title="Load more">+</button>
    <button class="showLess" title="Load more">-</button>
</ul>
</div>

Jquery代码，

//Hide initially load more & show less for all filters 
      $(".showLess").hide(); 
      $(".loadMore").hide(); 

      // used to hide filters which are > 5 in filter groups
      $('#filter-group21').each(function(){
          var label_count = 1;
          limit = 5;
          label_count = $(this).find('label').length;
          more_labels = label_count - limit;
          //alert(label_count);return false;
          // alert(label_count);return false;
          $(this).find('label:gt(4)').hide();
          // $(this).find('div:gt(5)').hide();
          // display load more if there are more than 5 filters
          $(this).find(".loadMore").toggle(label_count > 5);
          // $('.loadMore').empty();
          if(label_count > 1){
            $('.loadMore').append(more_labels + ' more');
          }
      });
      $('#filter-group22').each(function(){
          var label_count = 1;
          limit = 5;
          label_count1 = $(this).find('label').length;
          more_labels = label_count1 - limit;
          //alert(label_count);return false;
          // alert(label_count);return false;
          $(this).find('label:gt(4)').hide();
          // $(this).find('div:gt(5)').hide();
          // display load more if there are more than 5 filters
          $(this).find(".loadMore").toggle(label_count1 > 5);
          // $('.loadMore').empty();
          if(label_count1 > 1){
            $('.loadMore').append(more_labels + ' more');
          }
      });
      // On click of + button need to show rest of the filter elements
      $('.loadMore').click(function() {
          $(this).next().show();
          $(this).parent().find('label').show();
          // $('.loadMore').hide();
          // $(this).parent().find('div').show();
      });
      // On click of - button need to show only top 5 filter elements
      $('.showLess').click(function() {
          $(this).hide();
          $(this).parent().find('label').not(':lt(5)').hide();
      });

Answer 1

你看起来像这样吗？这是我疯狂的猜测，因为我们很多人都不清楚你的问题。

//Hide initially load more & show less for all filters 
      $(".showLess").hide(); 
      $(".loadMore").hide(); 

      // used to hide filters which are > 5 in filter groups
      $('#filter-group21').each(function(){
          var label_count = 1;
          limit = 5;
          label_count = $(this).find('label').length;
          more_labels = label_count - limit;
          //alert(label_count);return false;
          // alert(label_count);return false;
          $(this).find('label:gt(4)').hide();
          // $(this).find('div:gt(5)').hide();
          // display load more if there are more than 5 filters
          $(this).find(".loadMore").toggle(label_count > 5);
          // $('.loadMore').empty();
          if(label_count > 1){
            $('#filter-group21 .loadMore').append(more_labels + ' more');
          }
      });
      $('#filter-group22').each(function(){
          var label_count = 1;
          limit = 5;
          label_count1 = $(this).find('label').length;
          more_labels = label_count1 - limit;
          //alert(label_count);return false;
          // alert(label_count);return false;
          $(this).find('label:gt(4)').hide();
          // $(this).find('div:gt(5)').hide();
          // display load more if there are more than 5 filters
          $(this).find(".loadMore").toggle(label_count1 > 5);
          // $('.loadMore').empty();
          if(label_count1 > 1){
            $('#filter-group22 .loadMore').append(more_labels + ' more');
          }
      });
      // On click of + button need to show rest of the filter elements
      $('.loadMore').click(function() {
          $(this).next().show();
          $(this).parent().find('label').show();
					$(this).hide();
          // $('.loadMore').hide();
          // $(this).parent().find('div').show();
      });
      // On click of - button need to show only top 5 filter elements
      $('.showLess').click(function() {
					$(this).prev().show();
          $(this).hide();
          $(this).parent().find('label').not(':lt(5)').hide();
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filter-group21" class="cf">
              <!--<input type="text" id="dino-search_21" placeholder="Search By FABRIC">  -->    
    <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="147" />
        Crepe</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="148" />
        Denim</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="162" />
        Silk</label>
    <button class="loadMore" title="Load more">+</button>
    <button class="showLess" title="Load more">-</button>
</div>
<div id="filter-group22" class="cf">
              <!--<input type="text" id="dino-search_22" placeholder="Search By Brands">  -->    
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="149" />
        Go Colors</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="150" />
        Comfort Lady</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="151" />
        Morrio</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="152" />
        Twin Birds</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="153" />
        Fashion For U (FFU)</label>
    <label  class="checkbox cb_test" >
        <input name="filter[]" type="checkbox"  value="163" />
        Test</label>
    <button class="loadMore" title="Load more">+</button>
    <button class="showLess" title="Load more">-</button>
</div>

Answer 2

我试图提供我的解决方案而不是修复代码。这是控制主要事物的功能。这是一个Working Fiddle

function hideShow(elem){
    var $lMore = $(elem).find('.loadMore').show();
    var $sLess = $(elem).find('.showLess').hide();
    var $elems = $(elem).children('label');
    var elemLen = $(elem).children('label').length;
    if(elemLen > showLimit){
        $elems.slice(showLimit).hide();
        $lMore.html('+'+(elemLen - showLimit) + ' more');
    }
}

var showLimit = 5;
$('.cf').each(function() {
  hideShow(this);
})
$('.loadMore').on('click', function() {
  $(this).parent().children().show();
  $(this).hide();
})
$('.showLess').on('click', function() {
  hideShow($(this).parent());
})

function hideShow(elem) {
  var $lMore = $(elem).find('.loadMore').show();
  var $sLess = $(elem).find('.showLess').hide();
  var $elems = $(elem).children('label');
  var elemLen = $(elem).children('label').length;
  if (elemLen > showLimit) {
    $elems.slice(showLimit).hide();
    $lMore.html('+' + (elemLen - showLimit) + ' more');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filter-group21" class="cf">
  <!--<input type="text" id="dino-search_21" placeholder="Search By FABRIC">  -->
  <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="147" />
          Crepe</label>
  <label class="checkbox cb_test">
          <input name="filter[]" type="checkbox"  value="148" />
          Denim</label>
  <label class="checkbox cb_test">
          <input name="filter[]" type="checkbox"  value="162" />
          Silk</label>
  <button class="loadMore" title="Load more">+</button>
  <button class="showLess" title="Load more">-</button>
</div>
<div id="filter-group22" class="cf">
  <!--<input type="text" id="dino-search_22" placeholder="Search By Brands">  -->
  <label class="checkbox cb_test">
          <input name="filter[]" type="checkbox"  value="149" />
          Go Colors</label>
  <label class="checkbox cb_test">
          <input name="filter[]" type="checkbox"  value="150" />
          Comfort Lady</label>
  <label class="checkbox cb_test">
          <input name="filter[]" type="checkbox"  value="151" />
          Morrio</label>
  <label class="checkbox cb_test">
          <input name="filter[]" type="checkbox"  value="152" />
          Twin Birds</label>
  <label class="checkbox cb_test">
          <input name="filter[]" type="checkbox"  value="153" />
          Fashion For U (FFU)</label>
  <label class="checkbox cb_test">
          <input name="filter[]" type="checkbox"  value="163" />
          Test</label>
  <button class="loadMore" title="Load more">+</button>
  <button class="showLess" title="Load more">-</button>
</div>

Answer 3

您可以重构您的jquery代码，如下所示

//Hide initially load more & show less for all filters 
      $(".showLess").hide(); 
      $(".loadMore").hide(); 

      $('.cf').each(function(){
          var label_count = 1;
          limit = 5;
          label_count1 = $(this).find('label').length;
          more_labels = label_count1 - limit;
          //alert(label_count);return false;
          // alert(label_count);return false;
          $(this).find('label:gt(4)').hide();
          // $(this).find('div:gt(5)').hide();
          // display load more if there are more than 5 filters
          $(this).find(".loadMore").toggle(label_count1 > 5);
          // $('.loadMore').empty();
          if(label_count1 > 1){
            $(this).find('.loadMore').append(more_labels + ' more');
          }
      });
      // On click of + button need to show rest of the filter elements
      $('.loadMore').click(function() {
          $(this).next().show();
          $(this).parent().find('label').show();
          $(this).hide();
      });
      // On click of - button need to show only top 5 filter elements
      $('.showLess').click(function() {
          $(this).hide();
          $(this).parent().find('label').not(':lt(5)').hide();
          $(this).parent().find('.loadMore').show()
      });

工作jsfiddle是https://jsfiddle.net/zt0g3jxo/