参数化jQuery addClass？

Question

是否可以以某种方式参数化 jQuery addClass() 方法？ 比如，有一个在调用addClass() 方法时设置颜色属性的css 类？

我希望这是有道理的，因为我对 JavaScript 和 CSS 还很陌生。如果它很重要，我正在扩展 MediaWiki VisualEditor。该方法用于立即显示/渲染在编辑器中所做的更改。但是我找不到需要参数化的示例。

如果不可能，我很想知道该怎么做。

如果不是，也许有人可以建议如何以另一种方式实现我想要的东西？

编辑：

这是当前状态： 当我在文本中添加一些注释时，比如说一个语言注释，这被称为：

this.$element
    .addClass( 've-ce-languageAnnotation' )
    .addClass( 've-ce-bidi-isolate' )
    .prop( {
        lang: this.model.getAttribute( 'lang' ),
        dir: this.model.getAttribute( 'dir' ),
        title: this.constructor.static.getDescription( this.model )
    } );

这是ve-ce-language注解：

.ve-ce-languageAnnotation {
border-bottom: 1px dashed #ccc;
background-color: #ebf3f5;
}

这是 ve-ce-bidi-isolate：

.ve-ce-bidi-isolate {
unicode-bidi: isolate;
unicode-bidi: -moz-isolate;
unicode-bidi: -webkit-isolate;
}

我将此解释为prop() 函数设置了某种参数。所以这就是我为我的 textColor 注释尝试的：

     this.$element
    .addClass( 've-ce-textColorAnnotation' )
    .prop( {
        color: this.model.getAttribute( 'style' ),
        title: this.constructor.static.getDescription( this.model )
    } )
    ;

使用 ve-ce-TextColorAnnotation：

.ve-ce-textColorAnnotation {
    color: red;
}

这总是产生红色。当我尝试输入其他内容而不是合法颜色时，什么也没有发生。

Edit2：我想一种选择是为每种可能的颜色创建一个类，并根据参数添加正确的类？像这样：

var color = this.model.getAttribute('style');
if (color == 'blue') {
    this.$element.addClass( 'blueText' )
} else if (...

但这看起来不是一个好主意。

编辑 3：According to the top answer in this question，我想要的是不可能的 - 但我可以通过使用 this.$element.css('attr', 'value') 直接应用属性而不使用类。我想我可以用它来满足我的需要。

Answer 1

看来您只是想设置一种颜色，而不是添加一个类。 HTML 中的类可用于样式化或 DOM 导航，但在您的情况下，您只想对元素应用不同的颜色。您不需要为此使用类，尤其是在颜色是动态的情况下。

你要做的是调用jquery的.css()方法。它可以与单个参数一起使用，如下所示：

element.css({
  'color': 'black',
  'height': '100px'
});

或多个，如果您只想编辑单个属性：

element.css('color', 'black');

不使用 jQuery，你也可以这样做：

element.style.color = 'black';

Answer 2

你可以用简单的方式做什么。假设您有一个下拉菜单，您可以从中选择颜色。在选项的 value 属性上，你有 blueText 代表蓝色，redText 代表红色等等你想要的每种颜色。

然后在代码上你可以得到值。您可以查看here 如何获取值，然后您可以在 CSS 中找到 redText、blueText 等类。 当用户单击该选项时，您会捕获事件并执行以下简单的代码：

this.$element.addClass( 'text that you got from value attribute' )

您当然可以在添加之前删除类。