Javascript 更改引导'；幻灯片更改时的s旋转箭头颜色

我为一个旋转木马工作。但是，当有多个旋转木马时，它就不起作用了

能帮点忙吗？仅当添加一个旋转木马时，它才起作用

JSFIDDLE:

HTML

JS

---

尝试将幻灯片上的第二个旋转木马

功能中的
更改为
您需要编辑用于访问
控件的索引值，因为该数组中有4个控件。您还需要确保您的目标是正确的
'.carousel-inner'
，以便
.lastElementChild
和
.firstElementChild
正常工作

$('#Team1Carousel').on('slide.bs.carousel', function (e) {
console.log(e.relatedTarget);
var inner = document.querySelector('#Team1Carousel .carousel-inner');

var controls = document.querySelectorAll('.controls');
  if (e.direction === 'left') {
        controls[2].className = 'controls class-active'; //changed from controls[0].className
  }
  if (e.direction === 'right') {
        controls[3].className = 'controls class-active' //changed from controls[1].className
  }

  if (e.relatedTarget == inner.lastElementChild) {
    controls[3].className = 'controls class-fade' //changed from controls[1].className
  }
  if (e.relatedTarget == inner.firstElementChild) {
    controls[2].className = 'controls class-fade'//changed from controls[0].className
  }
})

检查下面的解决方案。您对导致此问题的两个转盘使用了相同的类


$（'TeamCarousel'）。on（'slide.bs.carousel'，函数（e）{
var inner=document.querySelector（'first carousel inner'）；
var controls=document.queryselectoral（'.first_carousel'）；
如果（e.方向===‘左’）{
控件[0]。类名=“第一个旋转木马类处于活动状态”；
}
如果（e.方向=='右'）{
控件[1]。类名='first_carousel类活动'
}
if（e.relatedTarget==inner.lastElementChild）{
控件[1]。类名='first_carousel类fade'
}
if（e.relatedTarget==inner.firstElementChild）{
控件[0]。类名='first_carousel类fade'
}
})
$（'Team1Carousel'）。on（'slide.bs.carousel'，函数（e）{
var-inner=document.querySelector（'second carousel-inner'）；
var controls=document.queryselectoral（'.second_carousel'）；
如果（e.方向===‘左’）{
控件[0]。类名=“第二个旋转木马类处于活动状态”；
}
如果（e.方向=='右'）{
控件[1]。类名=“第二个旋转木马类处于活动状态”
}
if（e.relatedTarget==inner.lastElementChild）{
控件[1]。类名='second_carousel class fade'
}
if（e.relatedTarget==inner.firstElementChild）{
控件[0]。类名=“第二个旋转木马类”
}
})
。类淡入淡出{
颜色：灰色；
}
.课堂活动{
颜色：红色；
}



幻灯片1在这里


幻灯片2在这里


幻灯片3在这里


幻灯片4在这里


幻灯片5在这里


幻灯片6在这里


幻灯片7在这里


幻灯片8在这里



幻灯片1在这里


幻灯片2在这里


幻灯片3在这里


幻灯片4在这里


幻灯片5在这里


幻灯片6在这里


幻灯片7在这里


幻灯片8在这里

在JSFIDLE中，它可以正常工作。您的问题是什么？您对导致此问题的两个转盘使用了相同的类。非常感谢@欢迎：）
.class-fade {
  color: grey;
}
.class-active {
  color: red;
}

$('#TeamCarousel').on('slide.bs.carousel', function (e) {
var inner = document.querySelector('.carousel-inner');

var controls = document.querySelectorAll('.controls');
  if (e.direction === 'left') {
        controls[0].className = 'controls class-active';
  }
  if (e.direction === 'right') {
        controls[1].className = 'controls class-active'
  }

  if (e.relatedTarget == inner.lastElementChild) {
    controls[1].className = 'controls class-fade'
  }
  if (e.relatedTarget == inner.firstElementChild) {
    controls[0].className = 'controls class-fade'
  }
})
$('#Team1Carousel').on('slide.bs.carousel', function (e) {
var inner = document.querySelector('.carousel-inner');

var controls = document.querySelectorAll('.controls');
  if (e.direction === 'left') {
        controls[0].className = 'controls class-active';
  }
  if (e.direction === 'right') {
        controls[1].className = 'controls class-active'
  }

  if (e.relatedTarget == inner.lastElementChild) {
    controls[1].className = 'controls class-fade'
  }
  if (e.relatedTarget == inner.firstElementChild) {
    controls[0].className = 'controls class-fade'
  }
})

$('#Team1Carousel').on('slide.bs.carousel', function (e) {
console.log(e.relatedTarget);
var inner = document.querySelector('#Team1Carousel .carousel-inner');

var controls = document.querySelectorAll('.controls');
  if (e.direction === 'left') {
        controls[2].className = 'controls class-active'; //changed from controls[0].className
  }
  if (e.direction === 'right') {
        controls[3].className = 'controls class-active' //changed from controls[1].className
  }

  if (e.relatedTarget == inner.lastElementChild) {
    controls[3].className = 'controls class-fade' //changed from controls[1].className
  }
  if (e.relatedTarget == inner.firstElementChild) {
    controls[2].className = 'controls class-fade'//changed from controls[0].className
  }
})