隐藏导航箭头取决于李内部的活动子类

Question

我遇到了一个旋转木马的问题，它没有将active类添加到他拥有的所有li中。但是，active类会正确地添加到li的子级上，具体取决于单击向左或向右箭头。

当li具有活动类active时，我的代码可以正常工作，但当li的子级是否具有active类时，代码就不起作用了。

这里可以看到工作案例的演示，其中li是否有active类https://jsfiddle.net/Adyyda/npamox58/22/

在下一个演示中，是我必须拥有的html结构，以及jquery代码不起作用的地方。

https://jsfiddle.net/Adyyda/npamox58/25/

我假设现有的代码正在每个li中寻找第二个孩子，所以这会产生问题吗？这个问题有什么解决方案吗？我必须以li的孩子为目标，这样我才能显示/隐藏导航箭头？谢谢

$(function() {
$('.prev-img').hide(); //initial run
$('.tabs_nav li').on('triggerClassChange', function() {
if ($(this).find('.thumbnail').first().hasClass('active')) {
$('.prev-img').hide();
} else {
$('.prev-img').show();
}
if ($(this).find('.thumbnail').last().hasClass('active')) {
$('.next-img').hide();
} else {
$('.next-img').show();
}
});
$('.next-img').click(function() {
var ref = $('.tabs_nav li').find('.thumbnail.active').get(0); // current item that has active class
var refNext = $(ref).next(); //reference for the next item adjacent to the current .active item
if (refNext.get(0) != undefined) { //make sure there is a item available
$(refNext).addClass('active'); //add class to the next item
$(ref).removeClass('active').trigger('triggerClassChange'); //remove class on current and trigger our custom event
}
});
$('.prev-img').click(function() {
var ref = $('.tabs_nav li').find('.thumbnail.active').get(0); // current item that has active class
var refPrev = $(ref).prev(); //reference for the next item adjacent to the current .active item
if (refPrev.get(0) != undefined) { //make sure there is a item available
$(refPrev).addClass('active'); //add class to the next item
$(ref).removeClass('active').trigger('triggerClassChange'); // remove class on current and trigger our custom event
}
});
})

.active {
background-color: red;
width: 100px;
height: 50px;
}
.next-img {
display: inline-block;
}
.prev-img {
display: inline-block;
}
.tabs_nav {
display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tabs_nav">
<li id='1'>
<img src="imagge.png" alt="alt text" class="thumbnail active">
</li>
<li id='10'>
<img src="imagge2.png" alt="alt text" class="thumbnail">
</li>
<li id='2'>
<img src="imagge2.png" alt="alt text" class="thumbnail">
</li>
<li id='3'>
<img src="imagge3.png" alt="alt text" class="thumbnail">
</li>
</ul>
<div class="buttons">
<div class="prev-img">left</div>
<div class="next-img">right</div>
</div>

Answer 1

您需要使用$('.tabs_nav li img.active')获取活动类的引用，然后使用.next()或.prev()获取next或prevli的引用，并在那里更改类。

演示代码 :

$(function() {
$('.prev-img').hide(); //initial run
$('.tabs_nav li').on('triggerClassChange', function() {
var length = $('.tabs_nav li').length
//check if the active class li index is 0
if ($(".thumbnail.active").closest("li").index() == 0) {
$('.prev-img').hide();
} else {
$('.prev-img').show();
}
//check if closest li index less then length
if ($(".thumbnail.active").closest("li").index() == length - 1) {
$('.next-img').hide();
} else {
$('.next-img').show();
}
});
$('.next-img').click(function() {
var ref = $('.tabs_nav li img.active'); //get active img reeference
var refNext = $(ref).closest("li").next().find("img"); //find next img
if (refNext.get(0) != undefined) {
$(refNext).addClass('active');
$(ref).removeClass('active').trigger('triggerClassChange');
}
});
$('.prev-img').click(function() {
var ref = $('.tabs_nav li img.active');
var refPrev = $(ref).closest("li").prev().find("img");
if (refPrev.get(0) != undefined) {
$(refPrev).addClass('active');
$(ref).removeClass('active').trigger('triggerClassChange');
}
});
})

.active {
background-color: red;
width: 100px;
height: 50px;
}
.next-img {
display: inline-block;
}
.prev-img {
display: inline-block;
}
.tabs_nav {
display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs_nav">
<li id='1'>
<img src="imagge.png" alt="alt text" class="thumbnail active">
</li>
<li id='10'>
<img src="imagge2.png" alt="alt text" class="thumbnail">
</li>
<li id='2'>
<img src="imagge2.png" alt="alt text" class="thumbnail">
</li>
<li id='3'>
<img src="imagge3.png" alt="alt text" class="thumbnail">
</li>
</ul>
<div class="buttons">
<div class="prev-img">left</div>
<div class="next-img">right</div>
</div>