如何使用 javascript 在元素的类之间切换？ [复制]

Question

我正在尝试制作一个脚本，当我单击一次复选框时，它会为复选框的标签设置一个类，当我再次单击它时，它会恢复为第一个类。

这是我的代码：

    <label for="img1">
    <img class="img1" src="Images/testimg.jpg" onclick="javascript:test()" id="t1" />
    </label>

    <input type="checkbox" class="chk " id="img1" name="img1" value="1" />

我希望测试函数在调用它时分配类 img2，当我再次调用它时分配类 img1。

Answer 1

JavaScript

function toggleClass(element, origin, target) {
    var newClass = element.className.split(" ");
    for (var i = 0, i < newClass.length; i++) {
        if (origin.localeCompare(newClass[i]) == 0) {
            newClass[i] = target;
        };
    };
    element.className = newClass.join(" ");
};
// Usage
var img = document.getElementById("img1");
toggleClass(img, "img1 img2");

jQuery

$("#img1").toggleClass("img1 img2");

更多here.

Answer 2

function test() {
    t1.className = t1.className == 'img1' ? 'img2' : 'img1';
}

相关：Change an element's class with JavaScript

Answer 3

如果你不使用 jQuery，我会建议你两件事：

1. 使用onclick 属性，您无需在调用函数之前设置javascript:。用了就不行了。
2. 您可以像这样通过函数发送元素：onclick=test(this)。现在你只需要比较他的班级。

function testFunction(element) {
    if (element.className === 'img1') {
        element.className = 'img2';
    } else {
        element.className = 'img1';
    }
}

小心如果您使用多类，因为您需要将它们添加到类名中。此函数将删除新类的完整类名。

Answer 4

您可以使用 JQuery 的 toggleClass 方法：

function toggler() {
    $('#t1').toggleClass('img2 img1')

}