Javascript 朱基隐藏问题

实际上，当计数大于5时，我显示+按钮，否则它将隐藏。当标签计数大于5时，意味着如果计数为7，则应显示“+2more”，这是正确的。当我点击+按钮时，意味着+按钮应该隐藏，-按钮应该出现，当我点击-按钮时，意味着+按钮应该隐藏是我想要的吗

HTML代码

<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>

---

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

//隐藏所有筛选器的“初始加载更多”和“显示更少”
$（“.showLess”）.hide（）；
$（“.loadMore”）.hide（）；
//用于隐藏过滤器组中大于5的过滤器
$（'#filter-group21'）。每个（函数（）{
var label_count=1；
限值=5；
label_count=$（this）.find（'label'）.length；
更多标签=标签计数-限制；
//警报（标签计数）；返回false；
//警报（标签计数）；返回false；
$（this.find（'label:gt（4）'）.hide（）；
//$（this.find（'div:gt（5）'）.hide（）；
//如果有5个以上的过滤器，则显示“加载更多”
$（this.find（“.loadMore”）.toggle（标签计数>5）；
//$（'.loadMore'）.empty（）；
如果（标签计数>1）{
$（'filter-group21.loadMore'）.append（更多标签+'more'）；
}
});
$（'#filter-group22'）。每个（函数（）{
var label_count=1；
限值=5；
label_count1=$（this）.find（'label'）.length；
更多标签=标签计数1-限制；
//警报（标签计数）；返回false；
//警报（标签计数）；返回false；
$（this.find（'label:gt（4）'）.hide（）；
//$（this.find（'div:gt（5）'）.hide（）；
//如果有5个以上的过滤器，则显示“加载更多”
$（this.find（“.loadMore”）.toggle（label_count1>5）；
//$（'.loadMore'）.empty（）；
如果（标签计数1>1）{
$（'#filter-group22.loadMore'）。追加（更多标签+'more'）；
}
});
//单击+按钮需要显示其余的过滤器元件
$（'.loadMore'）。单击（函数（）{
$（this.next（）.show（）；
$（this.parent（）.find（'label'）.show（）；
$（this.hide（）；
//$（'.loadMore'）.hide（）；
//$（this.parent（）.find（'div'）.show（）；
});
//单击-按钮只需显示前5个过滤器元件
$（'.showLess'）。单击（函数（）{
$（this.prev（）.show（）；
$（this.hide（）；
$（this）.parent（）.find（'label'）.not（':lt（5）'）.hide（）；
});

雪纺绸
灯芯绒
棉
绉纱
牛仔布
丝
+
-
色彩
慰安妇
莫里奥
孪生鸟
时尚为你（FFU）
试验
+
-
我试图提供我的解决方案，而不是修复您的代码。这是控制主要事物的函数。这里有一个


var showLimit=5；
$（'.cf'）。每个（函数（）{
隐藏（这个）；
})
$（'.loadMore'）。在（'click'，function（）上{
$（this.parent（）.children（）.show（）；
$（this.hide（）；
})
$（'.showLess'）。在（'click'，function（）上{
隐藏（$（this.parent（））；
})
函数隐藏（elem）{
var$lMore=$（elem.find（'.loadMore'）.show（）；
var$sLess=$（elem.find（'.showLess'）.hide（）；
变量$elems=$（elem）.children（'label'）；
var elemLen=$（elem）.children（'label'）.length；
如果（elemLen>showLimit）{
$elems.slice（showLimit.hide（）；
$lMore.html（'+'+（elemLen-showLimit）+'more'）；
}
}

雪纺绸
灯芯绒
棉
绉纱
牛仔布
丝
+
-
色彩
慰安妇
莫里奥
孪生鸟
时尚为你（FFU）
试验
+
-
您可以像下面这样重构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()
      });

正在工作的JSFIDLE是
提供完整的源代码/fiddle@arjun这是完整的代码只请更新您的问题，因为它不是clear@arjun更新了，请检查一下。是的，它是正确的，但我不想让那个按钮再重复两次。@Mohan更新了我的帖子，这是你代码中的一个错误，我真的建议你使用Parvez的帖子，它更优雅。当添加两次时，如果我再添加一个标签first div，意味着两个div都会显示两个标签，它不应该是这样的。@Mohan，你能详细说明一下吗，我不明白你现在面临什么问题，签出此链接：@Mohan如果给定的解决方案对您有利，则接受答案并在可能的情况下投票：P
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');
    }
}

//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()
      });