Question

您好我正在尝试制作.carousel-indicators位于relative的引导轮播。但是，因此，我无法将每个轮播项目的background-color设置为不同因为它不能应用于指示器所在的上部所以我试图将background-color属性应用于父类。

这是我的HTML代码：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">

  <!-- Wrapper for slides -->
   <div class="carousel-inner" role="listbox">

      <!-- Indicators -->
      <ol class="carousel-indicators text-left">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
      </ol>

      <div id="item0" class="item active">
      </div>
      <div id="item1" class="item">
      </div>
      <div id="item2" class="item">
      </div>
      <div id="item3" class="item">
      </div>
  </div>
</div>

以下是我尝试过的jQuery代码，
但它不起作用，我想知道为什么。

$(document).ready(function () {
    if ($("#item2").hasClass('active')) {
        $(".carousel-inner").css('background-color, '#d4ddde');
    }
    else {
        $(".carousel-inner").css('background-color, 'none');
    }
});

我编辑了jQuery语法，但仍然无效。

Answer 1

试试这个：

$(document).ready(function () {
    if ($("#item2").hasClass('active')) {
        $(".carousel-inner").css('background-color', '#d4ddde');
    }
    else {
        $(".carousel-inner").css('background-color' , 'none');
    }
});

.hasClass 的文档：here

.css 的文档：here

Answer 2

jquery hasClass和css有问题的用法不正确。使用以下：

$(document).ready(function () {
    if ($("#item2").hasClass('active')) {
        $(".carousel-inner").css('background-color','#d4ddde');
    }
    else {
        $(".carousel-inner").css('background-color','transparent');
    }
});

Answer 3

问题是，您的代码在页面打开时只执行一次。因此，当轮播幻灯片，并且Bootstrap将active类添加到他的项目时，您的代码不会被重新执行。您必须使用为您提供Bootstrap的回调函数。

当幻灯片移动时，Bootstrap的carousel插件会触发2个事件：

幻灯片：调用幻灯片实例方法时会立即触发此事件。
滑动：当轮播完成幻灯片转换时会触发此事件。

因此，如果您想观看转换期间发生的事情，或者您想要将类添加到您想要的任何内容中，您可能希望使用这些事件。

让我们看一下代码：

这是使用jQuery添加和观看这些事件的方法：

$('#carousel-example-generic').on('slide', function() {
    //Do something before the animation
});

$('#carousel-example-generic').on('slid', function() {
    //Do something after the animation
});

在您的情况下：

以下代码可以解决您的问题：

$(document).ready(function () {
    $('#carousel-example-generic').on('slide', function() {
        if ($("#item2").hasClass('active')) {
            $(".carousel-inner").css('background-color, '#d4ddde');
        }
        else {
            $(".carousel-inner").css('background-color', 'none');
        }
    });
});

这是官方bootstrap的轮播文档： http://getbootstrap.com/2.3.2/javascript.html#carousel

如何通过jquery更改父类的背景颜色

3 个答案: