Question

https://codepen.io/DimaDolgoter/pen/NBaERM?editors=0110

$(".btn-hide").hide(); //скрываем кнопку скрытия
$(".btn-show").hide(); //скрываем кнопку показа
if ($('.block-filter__inputs:nth-child(1) label').length > 9) { //если элементов больше 9
  $('.block-filter__inputs:nth-child(1) label:nth-child(n+9)').hide(); //скрываем их
  $(".block-filter__inputs:nth-child(1) .btn-show").show(); //показываем кнопку для показа всех скрытых элементов
  $(".block-filter__inputs:nth-child(1) .btn-show").click(function() { //при клике на кнопку показа
    $(".block-filter__inputs label").first().show(100, function showNext() {
      $(this).next("label").show(100, showNext);
    }); //постепенно показываем елементы
    $(".block-filter__inputs:nth-child(1) .btn-show").hide(); //скрываем кнопку показа
    $(".block-filter__inputs:nth-child(1) .btn-hide").show(); //показываем кнопку скрытия 
  });

  $(".block-filter__inputs:nth-child(1) .btn-hide").click(function() { //при клике на кнопку скрытия
    $(".block-filter__inputs:nth-child(1) label").last().hide(100, function hideNext() {
      $(this).prev("label:nth-child(n+9)").hide(100, hideNext); //скрывыаем элементы кроме первых восьми
    });
    $(this).hide(); //скрываем кнопку скрытия
    $(".block-filter__inputs:nth-child(1) .btn-show").show(); ///показываем кнопку показа
  });
}





if ($('.block-filter__inputs:nth-child(2) label').length > 9) {
  $(" .block-filter__inputs:nth-child(2) .btn-show").show();
  $('.block-filter__inputs:nth-child(2) label:nth-child(n+9)').hide(); //если элементов больше 9 то 

  $(".block-filter__inputs:nth-child(2) .btn-show").click(function() {
    $(".block-filter__inputs:nth-child(2) label").first().show("fast", function showNext() {
      $(this).next("label").show("fast", showNext);
    });
    $(".block-filter__inputs:nth-child(2) .btn-show").hide();
    $(".block-filter__inputs:nth-child(2) .btn-hide").show();
  });

  $(".block-filter__inputs:nth-child(2) .btn-hide").click(function() {
    $(".block-filter__inputs label").last().hide("fast", function hideNext() {
      $(this).prev("label:nth-child(n+9)").hide("fast", hideNext);
    });
    $(this).hide();
    $(".block-filter__inputs:nth-child(2) .btn-show").show();
  });
}

1）如何缩短？因为我认为每次nth-child选择器都复制函数并不酷。

2）当我使用.hide()或.show()时，元素在“跳跃”。单击“显示”或“隐藏”以查看该内容。

Answer 1

我重写了您的功能...我做了很多修改。

“显示/隐藏”按钮现在具有用于切换它们的通用类。
现在显示/隐藏按钮具有自己的处理程序，该处理程序适用于任何.block-filter__inputs div ...因此，您现在可以拥有尽可能多的这些处理程序，而无需复制代码（我认为这是主要问题）。
有一些变量可以设置动画参数，例如延迟和要显示的元素数量。
.filter()方法用于定位元素。
由index提供的.each()用于在每个元素的动画之前设置.delay()。

.get()

elementToHide使其成为数组并能够反转它。结果用$()包裹起来，再次使其成为jQuery集合。

// Hide the show/hide buttons on load.
$(".btn-show,.btn-hide").hide();

// Animation params.
var maxElToShow = 8;
var animationDelay = 100;

// For each block, hide the extra elements based on maxElToShow.
$('.block-filter__inputs').each(function(){
  if($(this).find('label').length >= maxElToShow){ // if there are more than 9 elements
    $(this).find('label:nth-child(n+'+maxElToShow+')').hide(); // hide them
    $(this).find(".btn-show").show();  // show the button to show all hidden items
  }
});

// A handler for all btn-show.
$( ".btn-show" ).click( function() {
  
  // Get the collection of elements to show.
  var elementToShow = $(this).parent(".block-filter__inputs").find("label").filter(function(){
    return ($(this).index()>=maxElToShow) ? $(this) : false;
  });
  
  // Gradually show them.
  elementToShow.each(function(index,element){
    $(element).delay(index*animationDelay).fadeIn(animationDelay);
  });

  // Toggle the show/hide buttons.
  $(this).closest(".block-filter__inputs").find(".showHide").toggle();
}); // End click.


// A handler for all btn-hide.
$(".btn-hide").click(function() {
  
  // Get the collection of elements to hide.
  var elementToHide = $(this).parent(".block-filter__inputs").find("label").filter(function(){
    return ($(this).index()>=maxElToShow) ? $(this) : false;
  });

  // Reverse the collection of elements to animate backward.
  var elementToHideReversed = $(elementToHide.get().reverse());

  // Gradually hide them.
  elementToHideReversed.each(function(index,element){
    $(element).delay(index*animationDelay).fadeOut(animationDelay);
  });

  // Toggle the show/hide buttons.
  $(this).closest(".block-filter__inputs").find(".showHide").toggle();
}); // END click

label{
  position: relative;
  margin:5px;
  display: inline-block;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="block-filter__inputs">

  <label for="">1</label>
  <label for="">2</label>
  <label for="">3</label>
  <label for="">4</label>
  <label for="">5</label>
  <label for="">6</label>
  <label for="">7</label>
  <label for="">8</label>
  <label for="">9</label>
  <label for="">10</label>
  <label for="">11</label>

  <div class="btn-show showHide">show</div>
  <div class="btn-hide showHide">hide</div>
</div>

<div class="block-filter__inputs">

  <label for="">1</label>
  <label for="">2</label>
  <label for="">3</label>
  <label for="">4</label>
  <label for="">5</label>
  <label for="">6</label>
  <label for="">7</label>
  <label for="">8</label>
  <label for="">9</label>
  <label for="">10</label>
  <label for="">11</label>
  <label for="">12</label>
  <label for="">13</label>
  <label for="">14</label>

  <div class="btn-show showHide">show</div>
  <div class="btn-hide showHide">hide</div>
</div>

由于我完全改变了这样做的方式，因此我没有研究隐藏脚本的“跳跃”效果。

CodePen与...一起玩

如何重写此脚本以缩短它？

1 个答案: