Question

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

我希望这是有道理的，因为我是 JavaScript 和 CSS 的新手。如果它很重要，我正致力于扩展 MediaWiki VisualEditor 。此方法用于立即显示/呈现编辑器中所做的更改。但我找不到一个需要参数化的例子。

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

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

编辑：

目前的状态：当我在文本中添加一些注释时，让我们说一个languageAnnotation，这叫做：

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-languageAnnotation：

.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，我想要的是不可能的 - 但是我可以直接应用属性而不使用类来使用它。$ element.css（＆＃39; attr＆＃39;，＆＃39 ;值＆＃39）。我想我可以将它用于我需要的东西。

Answer 1

你能以一种简单的方式做些什么。让我们假设您选择了颜色的下拉菜单。在选项的value属性上，你有蓝色的blueText，红色的redText，以及你想要的每种颜色等等。

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

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

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

Answer 2

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

您要做的是调用jquery的.css()方法。它可以像单个参数一样使用：

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

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

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

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

element.style.color = 'black';

参数化jQuery addClass？

2 个答案: