javascript - 根据不断变化的内联变量值添加一个类？

Question

我们如何根据内联变量的值更改来分配类？

下面是更容易理解的演示: http://jsfiddle.net/eYGr5/75/

基本上，另一个脚本(我不想碰)正在为 div 分配内联样式。我想确定“IF”此样式的值何时发生更改，以将类应用于某个元素。

这是代码的缩小版非交互式副本:

HTML:

<div class="mm-active">mm-active</div>

<div class="mm-container" style="color:DarkGreen;">mm-container: By hovering here, the jQuery should look up the new inline style (DeepPink) and ONLY because of that inline style, turn mm-active lime green!</div>

CSS:

.activefix {
    background:Lime;
}

jQuery:

// This function gets the value of an inline style property, (Source: bit.ly/1er8vJ2):
(function($) {
    $.fn.inlineStyle = function (prop) {
        return this.prop("style")[$.camelCase(prop)];
    };
}(jQuery));

// Now how do we assign a class based on what this inline variable changes to?
if ($(".mm-container").inlineStyle("color") == 'DeepPink') {
    $('.mm-active').addClass('activefix'); // This should apply "Lime" to mm-active
}

Answer 1

如果添加类的脚本正在使用 jquery 的 .addClass() 方法，您应该覆盖该方法以添加事件监听器，然后将该监听器绑定(bind)到导致其发生的事件当对该事件调用 .addClass 时触发。

(function(){
 var originalAddClassMethod = jQuery.fn.addClass;
 jQuery.fn.addClass = function(){
     var result = originalAddClassMethod.apply( this, arguments );
     jQuery(this).trigger('cssClassChanged');
     return result;
 }
})();


$(function(){
 $("#Your Element To Add Handler To").bind('cssClassChanged', function(){ 
     $('.mm-active').addClass('activefix');
 });
});