Question

我在解决如何根据内容的可见性操作容器时遇到了一些问题。

在这种情况下，它是一个带有两个幻灯片的滑块。鉴于它可以有许多具有不同“颜色”的幻灯片;我想改变容器的背景颜色。

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

滑块使用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语句只要求为true就会停止检查。

那么我将如何不断检查'陈述'是真还是假？此外，考虑到以下示例，我可以看到我将再次删除添加的类时遇到问题：

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

在孩子被揭示时动态更改容器背景

1 个答案: