Question

我有三个具有相同类名的列表。在加载时，我每个列表只显示5个列表项，并且有＃34;显示更多＆＃34;单击时显示列表项的其余部分的按钮。

我想要这样的行为，当＆＃39;显示更多＆＃34;按下一个列表按钮，它还显示其他列表的隐藏列表项。

我的困境是3个列表的行为类似于1个大列表并按顺序显示列表项，而不是一起显示所有列表的所有项目。

任何想法如何让所有列表一致行动？

＆＃13;

$(document).ready(function(){

      var list = $(".list li");
      var numToShow = 5;
      var button = $(".next");
      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;
          if (nowShowing >= numInList) {
            button.hide();
          }
      });

});

＆＃13;

.list {
	padding: 0;
	margin: 0;
}

.list 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">
<h1> LIst 1</h1>
	 <ul class="list">
     <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>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 2</h1>
	 <ul class="list">
     <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>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 3</h1>
	 <ul class="list">
     <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>
  </ul>
  <button class="next">Show More</button>
</div>

＆＃13;

Answer 1

您必须单独处理这些列表，如下所示：

$(document).ready(function(){

  var $list = $(".list");
  var numToShow = 5;
  var $buttons = $(".next");
  $buttons.hide();

  $list.each(function() {
    var $listItems = $(this).find("li");
    var $button = $(this).next('.next');
    var numInList = $listItems.length;
    $listItems.hide();
    if (numInList > numToShow) {
      $button.show();
    }
    $listItems.slice(0, numToShow).show();
  })

  $buttons.click(function(){
    var $this = $(this);
    var $list = $this.prev(".list");
    var $listItems = $list.find("li");
    var showing = $listItems.filter(':visible').length;
    $listItems.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = $listItems.filter(':visible').length;
    var numInList = $listItems.length;
    if (nowShowing >= numInList) {
      $this.hide();
    }
  });

});

.list {
	padding: 0;
	margin: 0;
}

.list 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">
  <h1> LIst 1</h1>
	 <ul class="list">
     <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>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 2</h1>
	 <ul class="list">
     <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>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 3</h1>
	 <ul class="list">
     <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>
  </ul>
  <button class="next">Show More</button>
</div>

Answer 2

正如Pedro已经提到的，您的代码的问题在于您一次选择所有const RootStack = StackNavigator({ Home: { screen: HomeScreen } }, { navigationOptions: { headerTitle: <GradientHeader title={this.state.navigation.title} /> } });元素，无论它们属于哪个列表。

您应该遍历列表并单独处理其项目。

如果你想要这样的行为，当为一个列表按下“显示更多”按钮时，它还会显示其他列表的隐藏列表项，你需要遍历列表每个按钮也会单击，并为每个列表显示所需数量的项目。

undefined is not an object (evaluating 'this.state.navigation')

li

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

在jquery中定位多个列表

2 个答案: