我有一个工作负载更多按钮使用bootstrap 3但是当我在bootstrap 4中转换我不再工作,它给了我很多麻烦,我甚至没有任何错误,当我检查源代码
这是我的html现在在bootstrap 4
<div class="tab-pane active" id="starter" role="tabpanel">
<ul class ="starter-list text-center" id ="starter-list">
</ul>
<div id="loadMore"><button class ="load-btn btn btn-default">SEE MORE PARTS & ACCESSORIES</button></div>
</div>
这是我以前在bootstrap 3中使用的js。
starter.forEach(function (current) {
var legend = current[0],
imgSrc = current[1],
descript = current[2],
descript2 = current[3],
descript3 = current[4],
price = current[5];
$('ul.starter-list').append(`
<li>
<div class = "row">
<div class="col col-md-12">
<div class="acs-detail">
<legend>` + legend + `</legend>
<img src="` + imgSrc + `" class="veh-content img-responsive" />
<div class="pna-description col-md-10">
<ul>
<p>` + descript + `</p>
<p>` + descript2 + `</p>
<p>` + descript3 + `</p>
</ul>
</div>
<div class="pna-price ">
<div class="text-deco">
<span>` + price + `</span>
</div>
<div class="border img-responsive">
<span></span>
</div>
</div>
</div>
</div>
</div>
</li>
`);
});
$(document).ready(function () {
var size_li = $(".starter-list li").size();
var x=6;
$('.starter-list li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+3 <= size_li) ? x+3 : size_li;
$('#starter-list li:lt('+x+')').show();
if(x == size_li){
$('#loadMore').hide();
}
});
$('#showLess').click(function () {
x=(x-3<0) ? 3 : x-3;
$('#starter-list li').not(':lt('+x+')').hide();
$('#loadMore').show();
});
});