javascript - 显示子项时动态更改容器背景

Question

我在弄清楚如何根据内容的可见性操作容器时遇到一些问题。

在这种情况下，它是一个带有两个幻灯片的 slider 。鉴于它可能有许多不同“颜色”的幻灯片；我想更改容器的背景颜色。

<div class="slider-container">

    <div class="slider-post red" aria-hidden="false">
        some content
    </div>

    <div class="slider-post green" aria-hidden="true">
        some other content
    </div>
</div>

slider 使用 aria-hidden 来确定幻灯片是否可见。

所以我的想法是:

if ( $('.slider-post').hasClass('red') && $('.red').attr('aria-hidden') == "false" ) {
    $('slider-container').addClass('red-container');
}
else if( $('.slider-post').hasClass('green') && $('.green').attr('aria-hidden') == "false" ) {
    $('slider-container').addClass('green-container');
}

但这导致 slider-container 总是红色，red-container。 我猜这是因为一旦 if 语句评估为真，它就会停止进一步检查。

那么我如何持续检查“陈述”是真还是假？ 此外，考虑到以下示例，我可以看到再次删除添加的类时会遇到问题:

if ( $('.slider-post').hasClass('red') && $('.red').attr('aria-hidden') == "false" ) {
    $('slider-container').addClass('red-container');
    $('slider-container').removeClass('green-container');
}  

如果有黄色、蓝色、棕色的容器等等怎么办？

Answer 1

我想您可以将幻灯片更改操作附加到事件。例如，单击下一个/上一个箭头。这样，您的 if 语句将被检查。

如果你有很多幻灯片，你可以获取它的背景颜色并将这种颜色应用到你的容器中:

var color = $(this).css("backgroundColor");
$('slider-container').css("backgroundColor", color);