Jquery 未找到jScroll.js nextSelector-正在销毁
我试图用jScroll.js和laravel5.7实现无限滚动。我的代码如下,因为我遵循了所有教程以及Stackoverflow的所有问题和答案,所以我无法让它工作。在控制台上,它给出了Jquery 未找到jScroll.js nextSelector-正在销毁,jquery,laravel,infinite-scroll,jquery-jscroll,Jquery,Laravel,Infinite Scroll,Jquery Jscroll,我试图用jScroll.js和laravel5.7实现无限滚动。我的代码如下,因为我遵循了所有教程以及Stackoverflow的所有问题和答案,所以我无法让它工作。在控制台上,它给出了jScroll:nextSelector未找到-正在销毁 <div class="infinite-scroll"> @foreach ($products as $category_products) <div class="col-lg-3 col-md-4 col-xs-6 thu
jScroll:nextSelector未找到-正在销毁
<div class="infinite-scroll">
@foreach ($products as $category_products)
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="/product/{{ $category_products->slug }}">
<div class="shadow card mb-2">
<!--Card image-->
<div class="view overlay">
<img class="card-img-top" src="{{ Storage::url($category_products->photos()->first()->filename) }}" alt="{{ $category_products->name }}" />
<a href="/product/{{ $category_products->slug }}">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title notokufi">{{ $category_products->name }}</h4>
<!--Text-->
<p class="card-text notonaskh">
{{ $category_products->description }}
</p>
<div class="row">
<div class="col">
<p><span class="text-accent">نرخ: {{ $category_products->display_price }}</span></p>
</div>
<div class="col">
<p class="float-right">شار: {{ $category_products->city->name }}</p>
</div>
</div>
</div>
</div>
</a>
</div>
@endforeach
{{ $products->links() }}
</div>
@foreach($类别产品)
{{$category_products->name}
{{$category_products->description}
ن!\1582:{{$category\产品->显示\价格}
@endforeach
{{$products->links()}
Javascript代码:
<script type="text/javascript">
$('ul.pagination').hide();
$(function() {
$('.infinite-scroll').jscroll({
autoTrigger: true,
debug: true,
loadingHtml: '<img class="center-block" src="http://demo.itsolutionstuff.com/plugin/loader.gif" alt="Loading..." />', // MAKE SURE THAT YOU PUT THE CORRECT IMG PATH
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.infinite-scroll',
callback: function() {
$('ul.pagination').remove();
}
});
});
$('ul.pagination').hide();
$(函数(){
$('.infinite scroll').jscroll({
自动触发:是的,
是的,
loadingHtml:“”,//确保您放置了正确的IMG路径
填充:0,
下一个选择器:'.pagination li.active+li a',
contentSelector:'div.infinite-scroll',
回调:函数(){
$('ul.pagination').remove();
}
});
});
这是用于分页的DOM,但它是隐藏的,但由于我不是javascript开发人员,我可能不了解DOM,也不太了解它
<ul class="pagination" role="navigation">
<li class="page-item disabled" aria-disabled="true" aria-label="« Pre">
<span class="page-link" aria-hidden="true">‹</span>
</li>
<li class="active"><a href="#">1</a></li>
<li class="page-item">
<a
class="page-link"
href="http://example.com/product/example?page=3"
>3</a
>
</li>
<li class="page-item">
<a
class="page-link"
href="http://example.com/product/example?page=4"
>4</a
>
</li>
<li class="page-item">
<a
class="page-link"
href="http://example.com/product/example?page=5"
>5</a
>
</li>
<li class="page-item">
<a
class="page-link"
href="http://example.com/product/example?page=6"
>6</a
>
</li>
<li class="page-item">
<a
class="page-link"
href="http://example.com/product/example?page=7"
>7</a
>
</li>
<li class="page-item">
<a
class="page-link"
href="http://example.com/product/example?page=8"
>8</a
>
</li>
<li class="page-item disabled" aria-disabled="true">
<span class="page-link">...</span>
</li>
<li class="page-item">
<a
class="page-link"
href="http://example.com/product/example?page=22"
>22</a
>
</li>
<li class="page-item">
<a
class="page-link"
href="http://example.com/product/example?page=23"
>23</a
>
</li>
<li class="page-item">
<a
class="page-link"
href="http://example.com/product/example?page=2"
rel="next"
aria-label="Next »"
>›</a
>
</li>
</ul>
-
‹
-
3.
-
4.
-
5.
-
6.
-
7.
-
8.
-
...
-
22
-
23
-
›
您在该链接上检查了什么?您是否确认已找到分页li.active+li标记?或者不是。是的,我肯定li.active+li a在那里,但它是hidden@RafiUllahPatel我也更新了包含DOM的问题。thanksI确实删除了$('ul.pagination').hide()代码>但它仍然抛出错误。