Question

我正在开展一个网站项目。我有3个div。如果你点击其中的任何一个它将占用80％的宽度空间，事情是有效的，但由于某种原因，其中一个是不工作，直到我在3d脚本行中将oneclose更改为oneopen，这是不对的正如我所见，它没有任何意义。它正在运行的方案是下一个：我有* open和* close id的不同标记，当我点击其中一个div时它会改变，如下所示。有谁知道这里发生了什么？

<script>

$('#twoclose').click(function() {
$('#twoclose').prop('id', 'twoopen');
$('#oneopen').prop('id', 'oneclose');
$('#threeopen').prop('id', 'threeclose');

});
</script>

<script>
$('#threeс').click(function() {
$('#threeс').prop('id', 'threeopen');
$('#oneopen').prop('id', 'oneclose');
$('#twoopen').prop('id', 'twoclose');

});
</script>

<script>
$('#oneclose').click(function() {
$('#oneclose').prop('id', 'oneopen');
$('#threeopen').prop('id', 'threeclose');
$('#twoopen').prop('id', 'twoclose');

});
</script>

Answer 1

绑定事件时，它绑定到该元素。更改id时，事件不会自动更改。使用类来更改样式，而不是ID。

简化您的代码，这样您就不必硬编码ID。

$(".box").on("click", function () {
   $(".box.active").removeClass("active");
   $(this).addClass("active");
});

.box {display: inline-block; width: 100px; height:100px; border: 1px solid black;}
.box.active { background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

jquery元素id没有正确更改

1 个答案: