javascript - jQuery 在两个 ID 之间切换

Question

为什么下面的代码不起作用？红色方 block 变为绿色，但在第二次单击时不会再次变为红色。

jQuery(document).ready(function($) {
  $("#red").click(function() {
    $(this).attr("id", "green");
  });

  $("#green").click(function() {
    $(this).attr("id", "red");
  });
});

div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red">

另请参阅:https://codepen.io/thomasmalley/pen/OqWNaM

Answer 1

问题是因为您在 #green 元素存在之前在加载时分配了事件处理程序。

要解决此问题，您需要使用委托(delegate)事件处理程序，以便在事件发生时评估元素选择器:

jQuery(function($) {
  $(document).on('click', "#red", function() {
    $(this).attr("id", "green");
  });

  $(document).on('click', "#green", function() {
    $(this).attr("id", "red");
  });
});

div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red"></div>

话虽这么说，但在运行时更改 id 属性并不是很好的做法。它们应该是静态的。一个更好的主意是在元素上切换 class，它控制样式。

jQuery(function($) {
  $('#foo').click(function() {
    $(this).toggleClass('green');
  });
});

#foo {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: red;
}

#foo.green {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo"></div>