Когда показан класс, добавить класс ко многим другим элементам

Question

У меня есть класс под названием

.informations 

, когда этот класс показано Я хотел бы добавить класс некоторых других элементов, таких как

#logo 
#totale 
.submenu 
#fp-nav 

чтобы изменить цвет шрифта с черного на белый. Есть ли способ достичь этого?

Проверить это JsFiddle

Answer 1

Если вы используете JQuery, вы можете использовать это расширение (найденное here):

(function($) { 
    $.each(['show','hide'], function(i, val) { 
     var _org = $.fn[val]; 
     $.fn[val] = function() { 
      this.trigger(val); 
      _org.apply(this, arguments); 
     }; 
    }); 
})(jQuery); 

Работа JSFiddle.

HTML

<div class="informations"> 
    When this is shown, other elements get white color. 
</div> 

<div id="logo"> 
    Logo 
</div> 

<div id="totale"> 
    Totale 
</div> 

<div class="submenu"> 
    Submenu 
</div> 

JavaScript

$(".informations").on("show", function() { 
    $("#logo, #totale, .submenu, #fp-nav").addClass("white-text"); 
}); 

setTimeout(function() { 
    $(".informations").show(); 
}, 2000); 

CSS

.white-text { 
    color: #fff; 
    background-color: #000; 
} 

.informations { 
    display: none; 
} 

UPDATE 1

Попробуйте this, найдено here

JavaScript

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutationRecord) { 
     if(mutationRecord.target.style.display !== "none") { 
     console.log('display changed, now visible!'); 
     $("#logo, #totale, .submenu, #fp-nav").addClass("white-text"); 
     } else { 
     console.log('display changed, now visible!'); 
     $("#logo, #totale, .submenu, #fp-nav").removeClass("white-text"); 
     } 
    });  
}); 

observer.observe($(".informations")[0], { attributes : true, attributeFilter : ['style'] }); 

setTimeout(function() { 
    $(".informations").show(); 
    setTimeout(function() { 
    $(".informations").hide(); 
    }, 2000); 
}, 2000);