Question

您能告诉我为什么:lt()无效。这是我的代码： https://jsbin.com/refunuyahe/edit?html,js,output

我首先尝试只显示100个项目，当用户滚动时，它应显示另外100个项目。

(function() {
  'use strict';
  $(function() {
    var str = '<ul id="myList">';
    var x = 100;
    var initialData = '';
    for (var i = 0; i < 1000; i++) {
      str += '<li>' + i + '</li>';

    }
    str += '</ul>'
    // complete data in str;
    // load only first 100 element
    $('#container').append(str);

    $('#myList li:lt(' + x + ')').show();
  })

  $('#container').on('scroll', function() {
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
      x += 100;
      $('#myList li:lt(' + x + ')').show();
    }
  })
})();

为什么这条线无效？

$('#myList li:lt(' + x + ')').show();

Answer 1

您的代码存在两个主要问题。首先，@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); String value1 = getIntent().getStringExtra("key1"); }变量超出了x事件处理程序的范围。其次，scroll元素在加载时已经可见，因此在它们上调用li将不起作用。

要解决此问题，请将show()定义放在更高的范围内，并使用CSS仅在页面加载时显示相关元素。试试这个：

$(function() {
  'use strict';
  var x = 100;
  var str = '<ul id="myList">';
  for (var i = 0; i < 1000; i++) {
    str += '<li>' + i + '</li>';
  }
  str += '</ul>'
  $('#container').append(str);

  $('#container').on('scroll', function() {
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
      x += 100;
      $('#myList li:lt(' + x + ')').show();
    }
  })
});

#container {
  height: 300px;
  border: 1px solid;
  overflow: auto;
}

.hide {
  display: none;
}

.showItem {
  display: block;
}

/* This is the required part */
#container li:nth-child(-n+100) {
  display: list-item;
}
#container li {
  display: none;
}

另请注意，我整理了您对IIFE和document.ready处理程序的使用。

Answer 2

我真的怀疑这是否是实现你真正想做的事情的正确方法。无论如何，你缺少隐藏元素。

(function(){
  'use strict';
  $(function(){
    var str ='<ul id="myList">';
     var x=100;
    var initialData ='';
    for(var i=0;i<1000;i++){
      str+='<li>'+i+'</li>';

    }
    str +='</ul>'
     // complete data in str;
    // load only first 100 element
    $('#container').append(str);
    $('#myList li:gt('+x+')').hide(); // <-- first hide rest of li's
    $('#myList li:lt('+x+')').show();
  })
  
   $('#container').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        x+=100;
      // HERE you need to hide elements as well
          $('#myList li:lt('+x+')').show();
        }
    })
  
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
  </div>

为什么：lt（）没有按预期工作？

2 个答案: