如何使用 javascript 在 HTML 元素的两个 ID 之间切换

How do I toggle between two IDs of a HTML element with javascript?

本文关键字：两个 ID 之间 javascript 何使用 HTML 元素      更新时间：2023-09-26
<div id = 'ONE' onclick = "change to id TWO" >One</div>
我

想要的是，每次我单击该div时，它都会在ID ONE和ID TWO之间切换，如果它在ID TWO上并且我单击它，它会切换到ID ONE，反之亦然。我该怎么做？

这最容易用jQuery完成。

我想到的第一件事是将点击计数器设置为 0。如果是偶数，我们将 id 更改为 red ，如果奇数，我们将 id 更改为 blue 。

var clickCount = 0;
$("div").on("click", function() {
    clickCount++;
    $("div").attr("id", clickCount % 2 === 0 ? "blue" : "red");
});
#red { color: red; }
#blue { color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>This is a div</div>

这是原生的JavaScript等效项。

var div = document.getElementById("my-div");
var clickCount = 0;
div.addEventListener("click", function() {
    clickCount++;
    div.setAttribute("id", clickCount % 2 === 0 ? "blue" : "red");
});
#red { color: red; }
#blue { color: blue; }
<div id="my-div">This is a div</div>

我找到了解决方案：

function changediv() {
    if (document.getElementById("one")) {
        document.getElementById("one").id = "two";
    } else {
        document.getElementById("two").id = "one";
    }
}

然后在你的div 

<div id = "one" onclick = "changediv()" >Your stuff</div>
相关文章：