Javascript 根据数据元素当前的类更改数据元素的样式？

我要做的是，当数据为slide to=“1”的滑块控制点的类为“active”时，我要设置。滑块覆盖a的背景色为金色。这是我尝试过的，但不起作用

$(document).ready(function(){

$('.active[data-slide-to="1"]') {
    $('.slider-overlay a').css('background', 'gold')
}

});

滑块的html

<div class="jumbotron">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <!-- Slide One - Set the background image for this slide in the line below -->
      <div class="carousel-item slide-cc active" style="background: #111">
        <div class="carousel-caption d-none d-md-block">
                </div>
      </div>
      <!-- Slide Two - Set the background image for this slide in the line below -->
      <div class="carousel-item slide-2waytray" style="background: #444">
        <div class="carousel-caption d-none d-md-block">
                </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

    <div class="slider-overlay">
    <h1>Welcome!</h1>
    <a href="" title="Get Started">Get Started</a>
    </div>

</div>

欢迎

.slider overlay a始终保持在页面上，我只想根据哪个幻灯片处于活动状态更改其背景颜色

这是一个JSFIDLE

$（文档）.ready（函数（）{
if（$（'.active'）.attr（'data-slide-to'）=“1”）{
$（'body'）.css（'background'，'gold'））
}
});

您可以使用来观察元素属性的更改，在突变通知处执行任务


let observer=new MutationObserver（函数（突变）{
突变。forEach（功能（突变）{
if（mutation.target.className==“活动”）{
$（“.slider overlay a”）.css（“背景”、“黄金”）；
返回错误
}
})
});
让target=$（“li[数据滑动到='1']）[0]；
让config={attributeFilter:[“class”]}；
observer.observe（目标，配置）；
setTimeout（函数（）{
target.className=“活动”
}，5000）




欢迎
这不起作用。我认为这与页面加载有关，其中.active在数据幻灯片上显示为=“0”，并且在幻灯片更改之前不与1匹配。如果我将其放入jfiddle with.active硬编码到数据slide to=“1”中，这会起作用。您能在问题中包含HTML吗？
.slider overlay是
.active[data slide to=“1”]
的子节点还是兄弟节点？我刚刚添加了它，抱歉，这确实有效，但我不知道它的任何含义！但回到第一张幻灯片后，它仍然是金色的。如果有3-4张不同的幻灯片，我将如何更改它以使其与当前幻灯片匹配？您所说的“当前幻灯片”是什么意思？好的，图像滑块从一张带有橙色的图像开始。当下一张幻灯片加载时，其中有黄色，此代码将按钮更改为黄色，这与幻灯片匹配，但当幻灯片返回到橙色幻灯片时，按钮保持为黄色。它必须将背景颜色与活动幻灯片的颜色相匹配。颜色列表存储在哪里？原来的问题只针对一个元素，是吗？太棒了！我将作为变量的target实例改为targetOne和targetTwo，这样就不会将它们与作为对象的实例混淆。