Question

我们如何根据内联变量的值变化来分配一个类？

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

基本上，另一个脚本（我不想触摸）是为div分配内联样式。我想确定何时＆＃34; IF＆＃34;这个样式的值已经改变，将类应用于某个元素。

以下是代码的缩小非交互式副本：

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

IF 添加该类的脚本正在使用jquery的.addClass（）方法，您应该覆盖该方法以添加事件侦听器，然后将该侦听器绑定到该事件在该事件上调用.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');
 });
});

Answer 2

不同浏览器的颜色处理方式不同，有些可能会返回rgba代码和一些十六进制代码（无论你分配给它们的是什么）。我不愿意检查明确的颜色名称，但如果你真的坚持，你需要编写一个函数来读取rgba / hex并将它们翻译成HTML实体。

根据更改内联变量的值添加类？

2 个答案: