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

Question

<div id = 'ONE' onclick = "change to id TWO" >One</div>

我想要的是，每次我单击该 div 时，它都会在 ID 1 和 ID 2 之间切换，如果它在 ID 2 上并且我单击它，它会切换到 ID 1，反之亦然。我怎样才能做到这一点？

Answer 1

使用 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>

这是 native 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>