我在为我的代码寻找解决方案时遇到问题。 I asked for help on how to continue click on a list if there's another list inside the list and how to switch between those lists我已经让它工作了,但我遇到的问题是第二个列表是最后一个项目还是那里。
基本上,它看起来像这样:
<button id="multi-single-next" class="button">Single next</button>
<button id="multi-next-multi-item" class="button">Multi item</button>
<button id="hide" class="button">Hide</button>
<ul class="multi-items">
<li class="single-data-item"><div class="data-item">1</div></li>
<li class="single-data-item"><div class="data-item">2</div></li>
<li class="single-data-item has-multi-items">
<ul class="pagnation-2">
<li>3a</li>
<li>3b</li>
<li>3c</li>
</ul></li>
<li class="single-data-item"><div class="data-item">4</div></li>
<li class="single-data-item"><div class="data-item">5</div></li>
我的设置方式是按钮从 .multi-items
切换到至 .pagnation-2
,当它到达该列表的末尾时,它不会返回到 .multi-items
继续列表。
检查第二个列表 ( .pagnation-2
) 是最后一项(即 <li>
之后没有 .pagnation-2
)还是第一个列表是否继续(即 <li>
之后)的最佳方法是什么.pagnation-2
)?
这是我的问题的一个工作示例:
$('#multi-single-next').click(function() {
let $item;
if(!$('ul.multi-items li.single-data-item.active').length) {
$item = $('ul.multi-items li.single-data-item').first();
}
else {
$prev = $('ul.multi-items li.single-data-item.active');
$item = $prev.next();
if(!$prev.next().length) {
$prev.removeClass('active');
$prev.delay(1).fadeOut(300);
return;
}
$prev.removeClass('active');
$prev.delay(1).fadeOut(300);
}
$item.addClass('active');
$item.delay(300).fadeIn(450);
// sub items
$('ul.pagnation-2 li').removeClass('active');
if($item.hasClass('has-multi-items')) {
const $sub = $item.find('ul li').first();
$sub.addClass('active');
$sub.delay(200).fadeIn(250);
$('#multi-single-next').css('display','none');
$('#multi-next-multi-item').css('display','block');
}
});
$('#multi-next-multi-item').click(function() {
const $item = $('ul.pagnation-2 li.active');
const $next = $item.next();
$item.removeClass('active');
$item.hide();
$next.addClass('active');
$next.show();
});
.multi-items li {
display: inline-block;
list-style: none;
}
.multi-items li:not(:first-child) {
display: none;
}
#multi-next-multi-item {display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="multi-single-next" class="button">Single next</button>
<button id="multi-next-multi-item" class="button">Multi item</button>
<ul class="multi-items">
<li class="single-data-item active"></li>
<li class="single-data-item"><div class="data-item">1</div></li>
<li class="single-data-item"><div class="data-item">2</div></li>
<li class="single-data-item has-multi-items"><ul class="pagnation-2">
<li>3a</li>
<li>3b</li>
<li>3c</li>
</ul></li>
<li class="single-data-item"><div class="data-item">3</div></li>
<li class="single-data-item"><div class="data-item">4</div></li>
</ul>
最佳答案
您可以检查下一个 li
的 length
是否存在。
解决方案
$('#multi-next-multi-item').click(function() {
const $item = $('ul.pagnation-2 li.active');
const $next = $item.next();
//Check if last item
const $lastItem = $('ul.pagnation-2 li.active').next().length;
$item.removeClass('active');
$item.hide();
if($lastItem == 0){
//Get the parent
const $li_parent = $item.parent().parent();
const $single_next = $li_parent.next();
$li_parent.removeClass('active');
$li_parent.hide();
$single_next.addClass('active');
$single_next.show();
$('#multi-single-next').css('display','block');
$('#multi-next-multi-item').css('display','none');
}else{
$next.addClass('active');
$next.show();
}
});
关于javascript - 如何根据列表中是否有其他项目显示按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59171779/