javascript - 更改每张幻灯片的容器背景

Question

我有一个具有以下结构的 slider :

<div class="wrapper">
    <div class="slide" id="slide1">
        <p>Slide1 Content</p>
    </div>        
    <div class="slide" id="slide2">
        <p>Slide1 Content</p>
    </div>
</div>

包装器宽度为 100%，但幻灯片 div 具有以像素为单位的最大宽度(即 400 像素)。有没有办法改变每张幻灯片的包装背景？我的意思是，例如，当第一张幻灯片处于事件状态时，包装背景变为黄色，而当第二张幻灯片处于事件状态时，包装背景变为红色。据我所知，没有办法使用 CSS 来做到这一点。那么可以使用 jquery 来实现吗？我尝试了 .wrapper:has() 选择器，但它没有按我预期的方式工作。

$(document).ready(function() {
    if($(".wrapper:has(#slide1)")) {
        $(".wrapper").css("background-color","yellow");
    } else if($(".wrapper:has(#slide2)")) {
        $(".wrapper").css("background-color","red");
    }
});

它将背景变成黄色，因为 wrapper 属于两张幻灯片。你知道如何让它按照我想要的方式工作吗？

注意:我不是 slider 插件的作者，所以我不能更改整个 slider 代码。我只想做一些定制来满足我的需要。

JSFiddle

Answer 1

用浏览器检查器检查插件演示，看起来当幻灯片处于事件状态时，插件将类 active-slide 添加到幻灯片 div。

文档中还显示，在插件激活中，您可以配置回调以在不同事件上执行 (http://jacksbox.de/stuff/jquery-fractionslider/plugin-options-reference/)。所以把背景颜色的变化放在相应的回调里面。类似的东西(检查所有回调，以验证您想要应用它的位置)...

function setActiveSlideBackground() {
    var activeSlideId = $('div.slide.active-slide').attr('id');
    if (activeSlideId == 'slide1')
        $('div.wrapper').css('background','yellow');
    else if (activeSlideId == 'slide2')
        $('div.wrapper').css('background','red');
}

$('.slider').fractionSlider({
    'nextSlideCallback': function(el,currentSlide,lastSlide,step) {
        setActiveSlideBackground();
    },
    'prevSlideCallback': function(el,currentSlide,lastSlide,step) {
        setActiveSlideBackground();
    }
});