多看少看按钮 [英] See more and see less button

问题描述

这是一个每次单击按钮时显示 4 个项目的脚本.我需要的是在单击后将按钮的文本更改为显示更多"，然后在显示所有项目时更改为显示更少".我试着添加这个:

if (nowShowing >= numInList) {$('.partners__button__a').toggle(function() {$(this).text('显示更多');}， 功能() {$(this).text('显示更少');button.show();});}

但它没有按照我需要的方式工作.

以及如何添加反向功能来隐藏项目?

谢谢.

$(document).ready(function() {var list = $(".partners__ul li");var numToShow = 4;var button = $(".partners__button__a");var numInList = list.length;列表.隐藏()；如果 (numInList > numToShow) {button.show();}list.slice(0, numToShow).show();button.click(function() {var 显示 = list.filter(':visible').length;list.slice(显示 - 1, 显示 + numToShow).fadeIn();var nowShowing = list.filter(':visible').length;});});

.partners__ul {列表样式:无；填充:0；边距:0；}.partners__ul li {位置:相对；底边距:10px；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="wrapper"><ul class="partners__ul"><li>项目 1</li><li>项目 2</li><li>项目 3</li><li>项目 4</li><li>项目 5</li><li>项目 6</li><li>项目 7</li><li>项目 8</li><li>项目 9</li><li>项目 10</li><li>项目 11</li><li>项目 12</li><button class="partners__button__a">显示更多</button>

解决方案

让文本改变很容易，最简单的方法是将它添加到按钮的 click 处理程序的底部:

if(nowShowing == numInList){$(this).text("显示更少");}别的{$(this).text("显示更多");}

至于第二项显示较少，你可以添加这个(在click处理程序中的agin)

if(显示 

从这里开始，您需要处理这样一个事实，即一旦您展示了所有内容并且您开始能够减少展示，您需要某种形式的布尔值来指示我们当前是否处于正在展示"或隐藏".

这就带来了另一个问题！当您淡入淡出时，:visible 状态将不正确，直到淡入淡出完成之后.因此，您应该使用带有回调的 fadeIn/fadeOut 的重载来推迟该功能.

完成的代码如下所示.

$(document).ready(function() {var list = $(".partners__ul li");var numToShow = 4;var button = $(".partners__button__a");var numInList = list.length;var isShowing = true;列表.隐藏()；如果 (numInList > numToShow) {button.show();}list.slice(0, numToShow).show();button.click(function() {var 显示 = list.filter(':visible').length;如果(正在显示){list.slice(显示 - 1, 显示 + numToShow).fadeIn(100,onFadeComplete);}别的{list.slice(showing - numToShow, numInList).fadeOut(100,onFadeComplete);}});函数 onFadeComplete(){var nowShowing = list.filter(':visible').length;if(nowShowing == numInList && isShowing){isShowing = false;button.text("少显示");}否则如果(正在显示){button.text("显示更多");}if(nowShowing == numToShow){button.text("显示更多");isShowing = true;}}});

.partners__ul {列表样式:无；填充:0；边距:0；}.partners__ul li {位置:相对；底边距:10px；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="wrapper"><ul class="partners__ul"><li>项目 1</li><li>项目 2</li><li>项目 3</li><li>项目 4</li><li>项目 5</li><li>项目 6</li><li>项目 7</li><li>项目 8</li><li>项目 9</li><li>项目 10</li><li>项目 11</li><li>项目 12</li><button class="partners__button__a">显示更多</button>

Here's a script that shows 4 items each time a button is clicked. What i need is to change the text of the button after a click to "show even more" and then change to "show less" at the end when all items shown. I tried to add this:

if (nowShowing >= numInList) {
  $('.partners__button__a').toggle(function() {
      $(this).text('Show More');
    }, function() {
      $(this).text('Show Less');
        button.show();
      });
  }

but it's not working the way I need.

And also how to add a reverse function to hide items?

Thank you.

$(document).ready(function() {
  var list = $(".partners__ul li");
  var numToShow = 4;
  var button = $(".partners__button__a");
  var numInList = list.length;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    list.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = list.filter(':visible').length;
  });
});

.partners__ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.partners__ul li {
  position: relative;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul class="partners__ul">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
  </ul>
  <button class="partners__button__a">Show More</button>
</div>

解决方案

Getting the text to change is easy enough, the simplest way would be to add this to the bottom of your button's click handler:

if(nowShowing == numInList){
    $(this).text("Show less");  
}
else{
    $(this).text("Show even more");
}

As for the second item of showing less, you could add this (agin in the click handler)

if(showing < numInList){
  list.slice(showing - 1, showing + numToShow).fadeIn();
}
else{
  list.slice(showing - numToShow, numInList).fadeOut();
}

From here, you need to handle the fact that once you've shown everything and you start being able to show less, you need some form of boolean to indicate if we're currently in the state of "showing" or "hiding".

This then presents another problem! As you're fading in and out the :visible state will not be correct until after the fade has completed. Therefore you should defer the functionality using an overload of fadeIn / fadeOut which takes a callback.

The finished code can be seen below.

$(document).ready(function() {
  var list = $(".partners__ul li");
  var numToShow = 4;
  var button = $(".partners__button__a");
  var numInList = list.length;
  var isShowing = true;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    if(isShowing){
      list.slice(showing - 1, showing + numToShow).fadeIn(100,onFadeComplete);
    }
    else{
      list.slice(showing - numToShow, numInList).fadeOut(100,onFadeComplete);
    }
    
    
  });
  
  function onFadeComplete(){
    var nowShowing = list.filter(':visible').length;
   
    if(nowShowing == numInList && isShowing){
        isShowing = false;
        button.text("Show less");  
    }
    else if(isShowing){
        button.text("Show even more");
    }
    
    if(nowShowing == numToShow){
      button.text("Show more");
      isShowing = true;
    }  
    
  }
});

.partners__ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.partners__ul li {
  position: relative;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul class="partners__ul">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
  </ul>
  <button class="partners__button__a">Show More</button>
</div>

这篇关于多看少看按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！