Question

我正在玩点击事件，我注意到这个功能只是第一次使用。这是为什么？我怎样才能使它能够在两个元素之间不断交换id？

并且，如果要在大量元素中传递id，那么方法会有戏剧性的变化吗？

我根本不使用jQuery。谢谢。

 window.onload = function() {
	document.addEventListener('click', function(e) {
	  document.getElementById("purpleSquare").id = 'redSquare';
	  document.getElementById("redSquare").id ="purpleSquare";
	})
};

#redSquare {
	background-color: red;
    width: 20px;
    height: 20px;
}
#purpleSquare {
	background-color: purple;
    width: 20px;
    height: 20px;
}

        <div id="redSquare"></div>

        <div id="purpleSquare"></div>

Answer 1

因为在运行此代码后......

document.getElementById("purpleSquare").id = 'redSquare';

... id="redSquare"会有两个元素。

因此，这将是不可靠的：

document.getElementById("redSquare")

在DOM2和DOM3中，行为未定义：

如果多个元素具有此ID，则未定义行为。

在DOM4中，将返回第一个元素。因此，第一次单击它将起作用，因为您想获得第一个。但是当你再次点击时，你想获得第二个，所以它不起作用。

相反，您可以在更改ID之前将元素存储在变量中。

var el1 = document.getElementById("purpleSquare"),
    el2 = document.getElementById("redSquare");
el1.id = 'redSquare';
el2.id ="purpleSquare";

document.addEventListener('click', function(e) {
  var el1 = document.getElementById("purpleSquare"),
      el2 = document.getElementById("redSquare");
  el1.id = 'redSquare';
  el2.id ="purpleSquare";
})

#redSquare {
  background-color: red;
  width: 20px;
  height: 20px;
}
#purpleSquare {
  background-color: purple;
  width: 20px;
  height: 20px;
}

<div id="redSquare"></div>
<div id="purpleSquare"></div>

Answer 2

尝试在这样的ID之间切换：

 document.getElementById("purpleSquare").id = 'xxxxxx';
 document.getElementById("redSquare").id ="purpleSquare";
 document.getElementById("xxxxxx").id = 'redSquare';

那应该有用。因为如果你运行这行代码：

document.getElementById("redSquare").id ="purpleSquare";

没有第一个：

 document.getElementById("purpleSquare").id = 'xxxxxx';

你将有两个元素，id = ＆＃34; purpleSquare＆＃34; 。并且如果您尝试运行会产生问题：

 document.getElementById("purpleSquare").id = 'redSquare';

在JS中交换id - 这只能工作一次。为什么？

2 个答案: