当 Bootstrap Carousel 上的活动类更改时更改背景答案

【问题标题】：Change background when active class changes on Bootstrap Carousel当 Bootstrap Carousel 上的活动类更改时更改背景
【发布时间】：2016-02-17 14:59:27
【问题描述】：

我想在每次滑块滑动时更改容器的背景。我想我需要检查该项目的类别是否/何时因为处于活动状态。我还想知道是否没有我应该听的事件。这是我正在研究的 jsfiddle：

https://jsfiddle.net/podbarron/nj04xms5/

$(function(){
$('#carousel-indicators').on('click', 'li', function(){

});
});

谢谢！

【问题讨论】：

好像你在那里添加了一个错误的调用，它的'else if()'你提到了'if else'
@ameenulla0007 感谢您的帮助。我试过了，但它并没有让我想要发生的事情发生。

标签： jquery twitter-bootstrap containers carousel

【解决方案1】：

Bootstrap Carousel 有一个在每次幻灯片转换时/之后触发的事件。你应该可以使用它。

示例：https://jsfiddle.net/nj04xms5/7/

事件里面的js很基础，只是给大家一个思路。

e.relatedTarget 将为您提供当前幻灯片，如果您想从中获取信息（即 ID）

$('#carousel-example-generic').on('slide.bs.carousel', function(e) {
      if(e.relatedTarget.id == 'firstSlide'){
          $("#landingContainer").css('background-color', 'orange');
      } else if(e.relatedTarget.id == 'secondSlide'){
          $("#landingContainer").css('background-color', 'green');
      }
})

【讨论】：

比我的答案@haxtbh 好多了。关于如何学习引导 JavaScript 中的内容的任何建议？
此信息可在引导文档中免费获得。 - getbootstrap.com/javascript/#carousel-events
了解@haxtbh。感谢那。 e.relatedTarget 中的 e 是否代表事件？

【解决方案2】：

Bootstrap 触发 events on carousel transitions，这是您可以改进它的第一种方法。恕我直言，第二个重大改进是避免冗长的 if/else 语句并在每张幻灯片上定义目标颜色，就像我在 this fiddle

中所做的那样

$(function(){
    $('.carousel').on('slide.bs.carousel', function(event) {
        color = $(event.relatedTarget).attr('data-new-color');
        if (color) {
            $('#landingContainer').css('background-color', color)
        }
    })
});

示例轮播元素

<div id="secondSlide" class="item" data-new-color="blue">
  <img src="http://dummyimage.com/1080x400/0011ff/000" alt="...">
  <div class="carousel-caption">
    ...
  </div>
</div>

【讨论】：

我打算改为背景图像。这还能用吗。假设我把 data-new-image="..." ？
就我个人而言，我从未通过$().css() 设置背景图像，但我认为它的工作原理是一样的。

【解决方案3】：

var randomColors    = ["green", "red", "white"];
var clrI    = 0;
$('#carousel-example-generic').on('slide.bs.carousel', function(e) {
    $(this).css('background-color', randomColors[clrI]);
    clrI++;
    if(clrI>=randomColors.length) {
        clrI    = 0;
    }
});

您可以使用数组来定义颜色，并按顺序应用这些颜色。

【讨论】：

【解决方案4】：

$(function(){
    $('#target1').on('click', function(){
        $('#landingContainer').css('background-color', 'green');
    });
});

【讨论】：

如果在代码中包含解释，这将是一个更好的答案。