根据当前拥有的类别更改数据元素的样式？

Question

我想要做的是当滑块控制点与数据幻灯片=“1”有类“活跃”，那么我想设置.slider-覆盖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叠加在任何时候都在页面上停留，我只是想改变它的颜色的。

这里是一个的jsfiddle https://jsfiddle.net/tpbbuqjh/2/

Answer 1

您可以使用MutationObserver观察员更改元素属性，在突变通知

let observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
    if (mutation.target.className === "active") { 
 
     $(".slider-overlay a").css("background", "gold"); 
 
     return false 
 
    } 
 
    }) 
 
}); 
 

 
let target = $("li[data-slide-to='1']")[0]; 
 

 
let config = {attributeFilter:["class"]}; 
 

 
observer.observe(target, config); 
 

 
setTimeout(function() { 
 
    target.className = "active" 
 
}, 5000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 
     <li data-target="#carouselExampleIndicators" data-slide-to="2"></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>

012执行任务

Answer 2

$(document).ready(function(){ 
 

 
if($('.active').attr('data-slide-to')=="1") { 
 
    $('body').css('background', 'gold') 
 
} 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="active" data-slide-to="1"></div>