CODEWITHSUNDEEP
javascriptjqueryclass
Urbycoz
Urbycoz

Reputation: 7421

How can I dynamically append and remove text for multiple class names?

I have loads of elements of my page.

        <input class="userInput" type="text" />
        <img src="myPic.png" class="userImage" id="userImage" />
        <input class="firstNameInput someOtherClass" type="text" />
        <input class="lastNameInput" type="text" />
        ...etc...

However I need write a function to change the classes dynamically so that they end in "Red". e.g. "userInputRed","userImageRed". And then another function to revert them back.

I can select them all easily enough...

$('.userInput','.userImage'....)

..but I don't know how to alter their existing classes without writing lengthy code adding and removing classes for each element individually.

e.g. $('.userInput').removeClass('userInput').addClass('userInputRed')

Is there a way to do this using JQuery without so much repetition?

So something like this...

$('.userInput','.userImage'....).appendToClassName('red');
$('.userInputRed','.userImageRed'....).removeFromClassName('red');

Upvotes: 2

Views: 89

Answers (1)

Mehdi Brillaud
Mehdi Brillaud

Reputation: 1866

You can toggle the class .red and target it in CSS with .userInput.red

Upvotes: 2

Related Questions