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

【问题标题】：How to give remove a class from a span and give it to another如何从跨度中删除一个类并将其提供给另一个
【发布时间】：2021-04-15 08:15:58
【问题描述】：

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

<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, 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, 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 浏览器工具。我已经尝试过控制台日志记录和警报，并且按钮似乎可以正常工作，但由于某种原因，幻灯片无法正常工作。

任何帮助将不胜感激。

【问题讨论】：

你会接受纯 JavaScript 答案吗？
我觉得this可以帮到你
您还想切换非活动类
我使用过 vanilla js，但似乎无法正常工作

标签： javascript html jquery css slideshow

【解决方案1】：

点击时，您希望找到当前活动的元素，获取下一个元素（取决于方向），并将active 替换为not-active 类。

$(document).ready(function () {
  $("#right-arrow").on("click", () => handleClick('right'));
  $("#left-arrow").on("click", () => handleClick('left'));
});

function handleClick(direction) {
  let currentImg = $(".active");
  let nextImg = direction === 'left' ? currentImg.prev() : currentImg.next()

  if (nextImg.length) {
    currentImg.removeClass("active").addClass("not-active");
    nextImg.addClass("active").removeClass("not-active");
  }
}

.icon-container span {
  font-size: 200px;
}

.not-active {
  display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<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>
<button id="left-arrow">left</button>
<button id="right-arrow">right</button>

【讨论】：

【解决方案2】：

以下代码应该让您走上正确的道路。如果您需要进一步的帮助或有不明白的地方，请告诉我

function arrowClick(){
event.preventDefault();

 var div = document.getElementsByClassName('icon-container')[0];
   var span = div.getElementsByTagName('span')
   console.log(span)

if( event.target.id == 'right-arrow'){
  
   for(var i = 0; i < span.length; i++){
  
     var next = (i+1) % (span.length)
  
     if (span[i].className == 'active'){
        span[i].classList.remove("active");
        span[i].classList.add("not-active");
        span[next].classList.add("active");     
        span[next].classList.remove("not-active");
        break;
     }
  
   }
   
}else{

   
      for(var i = span.length - 1; i > -1; i--){
  
        var next = (i-1+span.length) % (span.length)       
  
        if (span[i].className == 'active'){
           span[i].classList.remove("active");
           span[i].classList.add("not-active");
           span[next].classList.add("active");     
           span[next].classList.remove("not-active");
           break;
     }
  
   }



}
console.log(span)
}

<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="left-arrow" id="left-arrow" onclick = 'arrowClick()'>Left</a>
        <a href="#" class="right-arrow" id="right-arrow"   onclick = 'arrowClick()'>right</a>
    </div>
</div>

【讨论】：

【解决方案3】：

你写的代码很好。由于您使用锚标签的方式，它不起作用当您单击左右按钮时，页面正在重新加载，您无法看到所需的幻灯片。

如果您没有重定向任何地方，href 不应为空，它应该如下所示：

        <a href="#" class="right-arrow" id="right-arrow"></a>
        <a href="#" class="left-arrow" id="left-arrow"></a>

否则你可以使用 event.preventDefault()

$(document).ready(function () {
  $('.right-arrow').on('click', function (event) {
    event.preventDefault();
    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 (event) {
    event.preventDefault();
    let currentImg = $('.active');
    let prevImg = currentImg.prev();

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

因为它会阻止锚元素的默认行为。

【讨论】：