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

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

本文关键字：之间 元素 何使用 javascript      更新时间：2023-09-26

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

这是我的代码：

    <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时。

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");

点击此处了解更多信息。

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

相关：更改元素'；带有JavaScript 的s类

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

  1. 使用onclick属性，在调用函数之前不需要设置javascript:。如果你使用它，它将不起作用
  2. 您可以通过如下函数发送元素：onclick=test(this)。现在你只需要比较一下他的班级
function testFunction(element) {
    if (element.className === 'img1') {
        element.className = 'img2';
    } else {
        element.className = 'img1';
    }
}

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

您可以使用JQuery的toggleClass方法：

function toggler() {
    $('#t1').toggleClass('img2 img1')
}
相关文章：