javascript - How do i toggle between classes of an element using javascript?

Question

I am trying to make a script that sets a class for the label of a checkbox when i click it once and when i click it again it reverts to the first class.

This is the code i have:

    <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" />

I want the test function to assign the class img2 when it is called and when i call it again to assign the class 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");

更多在这里。

Answer 2

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

相关：使用 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')

}