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

您好，我正在尝试制作一个带

的引导旋转木马。旋转木马指示器

定位

相对

。 但是，由于此原因，我无法将每个转盘项目的

背景色设置为不同的

因为它不能应用于指示器所在的上部。

因此，我尝试将
background color
属性应用于父类

这是我的HTML代码：







下面是我尝试过的jQuery代码，

但它不起作用，我想知道为什么。


$（文档）.ready（函数（）{
if（$（“#item2”）.hasClass（'active'））{
$（“.carousel-inner”）.css（'background-color'，#d4ddde'）；
}
否则{
$（“.carousel-inner”）.css（'background-color，'none'）；
}
});请尝试以下操作：

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

.hasClass的文档：

.css的文档：
试试这个：

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

.hasClass的文档：

.css：
jquery的文档和用法不正确。使用以下内容：

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

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

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

问题是，代码在页面打开时只执行一次。因此，当旋转木马滑动时，引导程序将
活动
类添加到他的项目中，代码不会重新执行。您必须使用提供引导的回调函数

当幻灯片移动时，引导程序的旋转木马插件触发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的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的carousel官方文档：
我认为它不起作用的原因是因为您的代码只执行了一次。因此，当引导将类
active
添加到item2时，您的代码不会被重新加载-executed@Riverside谢谢你的提示！我纠正了jquery语法，但仍然不起作用。你能告诉我如何重新执行代码吗？检查我的答案，并告诉我是否有效；）@河滨哇，它工作得很好！非常感谢：）我认为它不起作用的原因是因为您的代码只执行了一次。因此，当引导将类
active
添加到item2时，您的代码不会被重新加载-executed@Riverside谢谢你的提示！我纠正了jquery语法，但仍然不起作用。你能告诉我如何重新执行代码吗？检查我的答案，并告诉我是否有效；）@河滨哇，它工作得很好！非常感谢：）