javascript - 幻灯片更改时更改 Bootstrap 的轮播箭头颜色

Question

我在单个轮播中使用了它。但是，当有超过 1 个轮播时，它不起作用。

有什么帮助吗？仅在添加一个轮播时有效。

JSFIDDLE:https://jsfiddle.net/177eLsmh/

HTML

<span class="pull-right">
    <a class="" href="#TeamCarousel" data-slide="prev"><i class="controls class-fade"> << </i></a> 
                 &nbsp; &nbsp; 
    <a class="" href="#TeamCarousel" data-slide="next"><i class="controls class-active"> >> </i></a>
</span>

<hr />
        <div class="row">
            <div class="carousel slide"  data-interval="false" data-wrap="false" id="TeamCarousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="col-xs-6">
                            <p>
                                Slide1 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide2 goes here 
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-6">
                            <p>
                                Slide3 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide4 goes here 
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-6">
                            <p>
                                Slide5 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide6 goes here 
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-6">
                            <p>
                                Slide7 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide8 goes here 
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<span class="pull-right">
    <a class="" href="#Team1Carousel" data-slide="prev"><i class="controls class-fade"> << </i></a> 
                 &nbsp; &nbsp; 
    <a class="" href="#Team1Carousel" data-slide="next"><i class="controls class-active"> >> </i></a>
</span>

<hr />
        <div class="row">
            <div class="carousel slide"  data-interval="false" data-wrap="false" id="Team1Carousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="col-xs-6">
                            <p>
                                Slide1 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide2 goes here 
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-6">
                            <p>
                                Slide3 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide4 goes here 
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-6">
                            <p>
                                Slide5 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide6 goes here 
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-6">
                            <p>
                                Slide7 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide8 goes here 
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

.class-fade {
  color: grey;
}
.class-active {
  color: red;
}

JS

$('#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'
  }
})

Answer 1

检查以下解决方案。您对导致此问题的两个轮播使用相同的类。

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

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

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

.class-fade {
  color: grey;
}
.class-active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<span class="pull-right">
    <a class="" href="#TeamCarousel" data-slide="prev"><i class="controls class-fade first_carousel"> << </i></a> 
        		 &nbsp; &nbsp; 
    <a class="" href="#TeamCarousel" data-slide="next"><i class="controls class-active first_carousel"> >> </i></a>
</span>

<hr />
        <div class="row">
            <div class="carousel slide"  data-interval="false" data-wrap="false" id="TeamCarousel">
                <div class="carousel-inner" id="first-carousel-inner">
                    <div class="item active">
                        <div class="col-xs-6">
                            <p>
                                Slide1 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide2 goes here 
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-6">
                            <p>
                                Slide3 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide4 goes here 
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-6">
                            <p>
                                Slide5 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide6 goes here 
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-6">
                            <p>
                                Slide7 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide8 goes here 
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
<span class="pull-right">
    <a class="" href="#Team1Carousel" data-slide="prev"><i class="controls class-fade second_carousel"> << </i></a> 
        		 &nbsp; &nbsp; 
    <a class="" href="#Team1Carousel" data-slide="next"><i class="controls class-active second_carousel"> >> </i></a>
</span>

<hr />
        <div class="row">
            <div class="carousel slide"  data-interval="false" data-wrap="false" id="Team1Carousel">
                <div class="carousel-inner" id="second-carousel-inner">
                    <div class="item active">
                        <div class="col-xs-6">
                            <p>
                                Slide1 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide2 goes here 
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-6">
                            <p>
                                Slide3 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide4 goes here 
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-6">
                            <p>
                                Slide5 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide6 goes here 
                            </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-6">
                            <p>
                                Slide7 goes here 
                            </p>
                        </div>
                        <div class="col-xs-6">
                            <p>
                                Slide8 goes here 
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>