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，我会建议您做两件事：

使用onclick属性，在调用函数之前无需设置javascript:。如果你使用它将无法工作。
您可以通过以下函数发送元素：onclick=test(this)。现在你只需要比较他的班级。

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

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

Answer 4

您可以使用JQuery的toggleClass方法：

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

}

如何使用javascript在元素的类之间切换？

4 个答案: