Parameterize jQuery addClass?

Question

Is it somehow possible to parameterize the jQuery addClass() method? Like, having a css class with a color property which is set when the addClass() method is called?

I hope that makes sense as I am very new to JavaScript and CSS. If it's of importance, I'm working on extending the MediaWiki VisualEditor. There this method is used to immediatly show/render changes made in the editor. But I couldn't find an example which would require parameterization.

If it's not possible, I'd love to know how to do it.

If it's not, maybe someone can suggest how to realize what I want another way?

Edit:

That's the current state: When I add some annotation to the text, let's say a languageAnnotation, this is called:

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 )
    } );

This is ve-ce-languageAnnotation:

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

This is ve-ce-bidi-isolate:

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

I interpreted this as the prop() function setting some kind of parameter. So this is what I tried for my textColor annotation:

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

With ve-ce-TextColorAnnotation:

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

This always produces red. When I try to enter something else then a legit color, nothing happens.

Edit2: I guess one option would be to create a class for each possible color, and adding the right class depending on the parameter? Like this:

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

but that doesn't look like a really good idea.

Edit 3: According to the top answer in this question, what I want is not possible - but I can directly apply an attribute without using classes by using this.$element.css('attr', 'value'). I guess I can use this for what I need.

*Like, having a css class with a color property which is set when the addClass() method is called?* That's the primary objective of `addClass()`, `.removeClass()`, and `.toggleClass()`. Just make a class as if it was a state (ie. on, off, high, low, show, hide, etc...) — zer00ne, Feb 05 '16 at 08:30
@Gerwin I've edited my question with some more information. GMchris I want to always add a color when addClass is called, but the color may vary, so I want something like setColor(String color). If something like that is possible. — Jdv, Feb 05 '16 at 08:35
I have 5+ years of experience with CSS and JS and I don't understand the question at all, could you please consider editing it for a better explanation? Maybe add a pseudo example, or an example in another language — Francisco Presencia, Feb 05 '16 at 08:42
@FranciscoPresencia I want this: If I press a button which has "red" on it, I want my selected text to become red. if I press the "blue" button, I want my text to become blue. And so on. — Jdv, Feb 05 '16 at 08:51

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

What can you do in a simple way. Let's say you have a drop down from which you chose the colors. On the value attribute of the option you have blueText for blue, redText for red and so on for each color you want.

Then on the code you can get the value. You can see here how to get the value then you have the classes in CSS like redText, blueText and so on. When the user clicks on the option you catch the event and do this simple pice of code:

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

You can of course remove the classes before you do the add.

edited May 23 '17 at 10:28

Community

1
1

answered Feb 05 '16 at 08:49

Radu

1,047
12
34

This would require me to have a class for each color, right? That doesn't sound like good style. Is it possible to apply one attribute without using classes? I've read something along the lines about the jQuery .attr() method, but can't make it work (not even without a parameter). – Jdv Feb 05 '16 at 08:52
you need only the color of the text to be changed? then yes you can use something like yourItem.style.color = "your new class". Or you can try with attr as you said ;) – Radu Feb 05 '16 at 09:04

GMchris · Accepted Answer · 2016-02-05T09:34:02.827

1

It appears you simply want to set a color, rather than add a class. Classes in HTML can be used for stylization or DOM navigation, however in your case you simply want to apply a different color to an element. You don't need to use classes for that, especially if the colors are dynamic.

What you want to do is call jquery's .css() method. It can be used with a single argument like so:

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

or several, if you only want to edit a single property:

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

Without using jQuery, you could also do this:

element.style.color = 'black';

edited Feb 05 '16 at 09:34

answered Feb 05 '16 at 08:57

GMchris

5,439
4
22
40

Should be `('color', 'black')` – Francisco Presencia Feb 05 '16 at 09:15
Right you are. Fixed it. – GMchris Feb 05 '16 at 09:34

Parameterize jQuery addClass?

2 Answers2