Javascript 显示子容器时动态更改容器背景

我在弄清楚如何基于内容的可见性操作容器时遇到了一些问题

在这种情况下，它是一个带有两个滑块的滑块。考虑到它可能有许多不同“颜色”的幻灯片；我想改变容器的背景色

<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>

但这会导致

滑块容器始终为红色，
红色容器
。
我想这是因为只要if语句的计算结果为true，它就会停止进一步的检查

那么，我如何不断地检查这些“陈述”是真是假呢？
此外，考虑到以下示例，我可以看到在删除添加的类时会再次遇到问题：

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

如果有一个黄色、蓝色、棕色等颜色的容器，该怎么办？
我想您可以将幻灯片更改操作附加到事件。例如，单击下一个/上一个箭头。这样，将检查您的if语句

如果您有很多幻灯片，您可以获取其背景色并将此颜色应用于您的容器：

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

为什么不在滑块的js中执行if-else呢？好问题。在这种特殊情况下，是第三方插件生成滑块。因此，如何实施它是我力所不及的。此外，颜色类从后端动态添加，并由用户生成。所以我需要用我在这里得到的东西来处理这种情况：（你一定是把它的js弄对了吗？你可以读一读代码，然后弄清楚……是的。你指的是哪一部分？谢谢，这是个好主意。经过更多的研究，我发现我可以在下一张幻灯片之前进入一个名为的事件。
var color = $(this).css("backgroundColor");
$('slider-container').css("backgroundColor", color);