Le fond d'un conteneur qui change de façon dynamique à la découverte d'un enfant

Question

J'ai quelques difficultés à comprendre comment je manipule un conteneur en fonction de la visibilité du contenu.

Dans ce cas, il s'agit d'un curseur avec deux diapositives. Étant donné qu'il pourrait avoir de nombreuses diapositives avec différentes «couleurs»; et je veux changer la couleur de fond du conteneur. Le curseur utilise aria-hidden pour déterminer si la diapositive est visible ou non.

donc ce que je pensais était:

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

Mais cela se traduit par le slider-container étant toujours rouge, red-container. Je suppose que c'est parce que dès que l'instruction if évalue comme vrai, il arrête de vérifier plus loin.

Alors, comment vérifier en permanence si les 'déclarations' sont vraies ou fausses? De plus, je vois que je vais courir dans un problème supprimant les cours ajoutés à nouveau, compte tenu de l'exemple suivant:

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

s'il y a un récipient jaune, bleu, brun, et ainsi de suite?

Answer 1

Je suppose que vous pouvez attacher l'action de changement de diapositive à un événement. Cliquez sur les flèches suivant/précédent par exemple. De cette façon, votre instruction if sera vérifiée.

Si vous avez beaucoup de diapositives, vous pouvez obtenir son arrière-plan de couleur et d'appliquer cette couleur à votre conteneur:

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