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

我试图做一个脚本，为一个复选框的标签设置类时，我点击一次，当我再次点击它回到第一类。如何在使用javascript的元素的类之间切换？

这是我的代码有：

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

来源

2013-05-08 Flavius Dragan

你需要替换当前类（一个简单的任务）或添加一个新的（不难，但需要一个辅助函数）？ – 2013-05-08 14:56:19

为了您的娱乐，堆栈溢出经典：[没有足够的jQuery]（http://meta.stackexchange.com/a/48195/141539）。 – 2013-05-08 14:58:09

也许你可以使用这个： document.getElementById（“MyElement”）。classList.toggle（'MyClass'）; – ferralucho 2018-02-22 12:41:19

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

来源

2013-05-08 14:50:53 flavian

他说javascript，而不是jquery – Sebas 2013-05-08 14:51:09

你是不是指'.toggleClass（“img1 img2”）;'？ – 2013-05-08 14:51:33

@RocketHazmat良好的捕获.. @ alex23：相应地更新您的问题：http://api.jquery.com/toggleClass/#toggleClass-className'一个或多个类名（用空格分隔）...' – sircapsalot 2013-05-08 15:00:08

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

来源

2013-05-08 14:52:37 Sebas

这很好我想，'t1.className = t1.className == t1.className.indexOf（'img1'）> -1？ t1.className.replace（'img1'，'img2'）：t1.className.replace（'img2'，'img1'）';' – 2013-05-08 15:00:24

这也是行不通的。如果你有'img10'作为类名，那么在交换后你最终会得到'img20'，这不是你想要的。 – Herms 2013-05-08 15:01:24

我会说_duplicate_而不是_related_。 – 2013-05-08 15:01:46

-1

你可以使用jQuery的toggleClass方法：

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

}

来源

2013-05-08 14:56:13 sweaver2112

downvoters应该咨询http://meta.stackexchange.com/questions/45176/when-is-use-jquery-not-a-valid-answer-to-a-javascript-question/48195#48195 – sweaver2112 2013-05-08 18:00:40

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

随着onclick财产，在调用函数之前不需要设置javascript:。如果你使用它，它将不起作用。
您可以通过如下函数发送元素：onclick=test(this)。现在你只需要比较他的课程。

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

照顾如果使用multiclasses，因为你需要将它们添加到类名。这个函数将删除新的全名。

来源

2013-05-08 14:56:37 DaGLiMiOuX

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

回答

相关问题