如何从跨度中删除一个类并将其提供给另一个

编程问答 2022-05-31

问题描述

我正在尝试创建一个图标幻灯片。图标在它们自己的跨度中，它们有自己的类。单击箭头按钮应该更改添加从当前跨度中删除“活动”类并将其添加到下一个。

<div class="object-container">

    <div class="icon-container">
       <span class="active"><i class="fa fa-car"></i></span>
       <span class="not-active"><i class="fa fa-bicycle"></i></span>
       <span class="not-active"><i class="fa fa-plane"></i></span>
       <span class="not-active"><i class="fa fa-ship"></i></span>
       <span class="not-active"><i class="fa fa-fighter-jet"></i></span>
       <span class="not-active"><i class="fa fa-space-shuttle"></i></span>
    </div>
    <div class="arrow-buttons">
        <a href="" class="right-arrow" id="right-arrow"></a>
        <a href="" class="left-arrow" id="left-arrow"></a>
    </div>
</div>

这里是 CSS

.not-active{
font-size: 150px;
position: relative;
left: 12rem;
top: 12rem;
z-index: -10;
display: none;
}

.active{
z-index: 10;
display: inline-block;
font-size: 200px;
position: relative;
left: 9rem;
top: 10rem;

}

.object-container{
    position: relative;
    left: 40rem;
    top: 15rem;
    background-color: rgb(0,58);
    width: 40rem;
    height: 40rem;
}

.arrow-buttons{
position: fixed;
top: 30rem;
z-index: 100;
}

.left-arrow,.right-arrow{
width: 50px;
height: 50px;
transition: .5s;
float: left;
box-shadow: -2px 2px 0 rgba(255,241,0.5);
cursor: pointer;

最后是 jQuery

$(document).ready(function(){
$(".right-arrow").on('click',function(){
    let currentImg = $('.active');
    let nextImg = currentImg.next();

    if(nextImg.length){
        currentImg.removeClass('active').css('z-index',-10);
        nextImg.addClass('active').css('z-index',10);
    }

})

$(".left-arrow").on('click',function(){
    let currentImg = $('.active');
    let prevImg = currentImg.prev();

    if(prevImg.length){
        currentImg.removeClass('active').css('z-index',-10);
        prevImg.addClass('active').css('z-index',10);
    }

})
})

由于某种原因，站点应用程序没有响应。我尝试过似乎没有显示任何错误的 chrome 浏览器工具。我试过控制台日志记录和警报，按钮似乎可以正常工作，但由于某种原因幻灯片无法正常工作。

任何帮助将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptjqueryslideshow