javascript - 如何动态地附加和删除多个类名的文本？

Question

我的页面有很多元素。

        <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...

但是我需要编写一个函数来动态更改类，以便它们以“Red”结尾。例如“userInputRed”、“userImageRed”。然后是另一个将它们还原的函数。

我可以很容易地选择它们...

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

..但我不知道如何在不编写冗长代码的情况下更改现有类，分别为每个元素添加和删除类。

例如$('.userInput').removeClass('userInput').addClass('userInputRed')

有没有一种方法可以使用 JQuery 来做到这一点而无需那么多重复？

所以像这样...

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

Answer 1

您可以切换类 .red 并使用 .userInput.red 在 CSS 中定位它