Question

这是一个脚本，每次单击一个按钮时显示4个项目。我需要的是在点击“显示更多”后更改按钮的文本，然后在显示所有项目时更改为“显示更少”。我试着补充一下：

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

但它不按我需要的方式工作。

还有如何添加反向功能来隐藏项目？

谢谢。

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

Answer 1

我做了不同的事情。使用了两个按钮，而不是一个只是为了隐藏和显示半个内容可见的同时。不确定你是否需要这种方式，只是想让它更具功能性。

＆＃13;

    $(document).ready(function() {
      var list = $(".partners__ul li");
      var numToShow = 4;
      var button = $(".partners__button__a");
        var buttonLess = $(".partners__button__a_less");
      var numInList = list.length;
      var nowShowing = 4;
      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();
          nowShowing = list.filter(':visible').length;
          if(numInList === nowShowing) {
              $(this).hide();
              buttonLess.text('Show Less')
          } else if(nowShowing > numToShow) {
              $(this).text('Show Even More');
              buttonLess.show();
          }
      });

        buttonLess.click(function() {
            var showing = list.filter(':visible').length;
            list.slice(showing - numToShow, showing).fadeOut();
            nowShowing = nowShowing - numToShow;
            if(numToShow === nowShowing) {
                $(this).hide();
                button.text('Show More');
            } else if(nowShowing < numInList) {
                $(this).text('Show Less');
                button.show();
            }
      });

    });

＆＃13;

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

＆＃13;

<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>
        <button class="partners__button__a_less" style="display:none">Show Less</button>
    </div>

＆＃13;

Answer 2

让文本更改很简单，最简单的方法是将其添加到按钮click处理程序的底部：

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

至于显示较少的第二项，你可以添加它（在click处理程序中的agin）

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

从这里开始，你需要处理这样一个事实：一旦你展示了所有东西并且你开始能够显示更少，你需要某种形式的布尔值来表明我们目前是否处于“显示”状态或“隐藏”。

这就出现了另一个问题！当你淡入淡出时，{/ 1}}状态将不正确，直到之后淡入淡出完成。因此，您应该使用: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;
  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;
}

查看更多并查看更少的按钮

2 个答案: