Javascript Jquery id change.attr-won'；我不能完全工作

我有一个Id为knight的div（我用

按钮打开了它。单击
）。

每当我按下3个按钮中的任何一个（包括骑士），它都会将骑士的id更改为精灵（是的，我正在制作一个游戏）。

我为knight准备了一个
.hover
，如下所示：

$('#knight').hover(
    function () {
        $(this).css('background-color', 'green');
    },
    function () {
        $(this).css('background-color', 'blue');
    });

这样做很有效，每当我加载页面时，当我将鼠标悬停在页面上方时，页面会变为绿色，当我离开页面时，页面会变回蓝色。

更改id脚本

    $('.submenu').click(function (e){
    $('#knight').attr('id', 'elf').text('Elf');
    });

当我按下任何按钮（子菜单）时，文本变为“Elf”，颜色变为css中id为#Elf的颜色

css

因此，我假设在id更改后，当我将鼠标悬停在其上时，它将使用以下代码：

    $('#elf').hover(
function () {
    $(this).css('background-color', '#01DF01');
},
function () {
    $(this).css('background-color', '#00FF00');
});

它不是变成不同颜色的绿色，而是再次变成绿色和蓝色。这就像在获取css特征后，它会将id重置为#knight

有人能帮我吗

编辑#1

我忘了显示div id knight，这是实际的按钮。单击函数

<div id="text">
<div id="story">Choose a class.</div>
<div class="submenu" id="knight">Knight</div>


选择一个班级。
骑士


这就是
$（'.子菜单
）的位置。单击功能进入。
另外，如果有人知道另一种删除文本和这些按钮的方法，如果你点击一个按钮，请告诉我。我知道我忘了添加一些内容。
在更改id以删除旧的悬停事件之前，请在单击事件中使用
（“#骑士”）。禁用（'hover'）
。更改id后，还要在click事件中绑定新的悬停。
更多信息：
它正按照您的要求执行。您已经将函数绑定到单击“子菜单”div本身。而不是它里面的任何元素

试着换成

$('#kinght').click(function (e){
  $( this ).attr('id', 'elf').text('Elf');
});

实现这一点的一种方法是删除使用jQuery创建的悬停，并使用CSS创建悬停

#knight {
  background-color: blue;
}
#knight:hover {
  background-color: green;
}

之后，在制作游戏时，您可能希望保留jQuery客户端以产生悬停效果。
问题是当你调用
$（'#knight'）.hover（…），您将一个悬停功能添加到#骑士，然后巫婆与之关联

即使您更改了ID，它也会保留加载页面时为其提供的功能

而不是仅仅改变ID，你应该考虑删除与旧按钮关联的每一个事件，并创建一个新的.HORE事件。
 < P>当你在做一个游戏时，我假设你的实际代码在你的事件处理程序中有更多的进展。如果是这种情况，下面的方法将使用
classes
而不是
ids

如果你想要的效果/动作都可以通过CSS实现，regent的解决方案实际上要好得多


//将函数绑定到包含我们想要影响的元素的元素（#容器）
//您也可以绑定到文档，但最好绑定到目标的元素closser
//处理程序将侦听容器子体上与提供的选择器（.knight和.elf）匹配的事件
$（“#容器”）.on（'mouseover'，'.knight，.elf'，function（）{
//更改这两个类的css，这只是使我们不必拥有两个单独的函数，在实际页面上一次只存在一个元素
$（“.knight”）.css（'background-color'，'green'）；
$（“.elf”）.css（'background-color'，'01DF01'）；
});
//这里也一样，不过是为了mouseout事件
$（“#容器”）.on（'mouseout'，'.knight，.elf'，function（）{
$（“.knight”）.css（'background-color'，'blue'）；
$（“.elf”）.css（'background-color'，'00FF00'）；
});
//单击按钮时，使用“toggleClass”删除“knight”类并添加“elf”类
//我在末尾添加了“.css（'background-color'，“#00FF00'）”，因为如果样式最初设置为“.css（）”，当我们更改类时，web工具包浏览器不会重新绘制元素并更新样式`
$（“.子菜单”）。单击（函数（e）{
$（'.knight'）.toggleClass（'knight，elf'）.text（'elf'）.css（'background-color'，'00FF00'）；
});
.knight{
背景颜色：蓝色；
高度：20px；
宽度：100px；
}
小精灵先生{
背景色：#00FF00；
高度：20px；
宽度：100px；
}

更改id不会删除已附加的事件，也不会绑定事件。欢迎使用堆栈溢出！好的第一个问题。您已经提供了预期行为、实际行为，并且只提供了相关的代码。干得好@GabrielHautclocq修改元素的ID没有问题。通常，首先更改ID是个坏主意。最好切换一个类，并在事件句柄中检查该类，以及使用类和CSS的正确解决方案：。@Regent yep，我在尝试其他内容时就有了它，但忘了删除它，谢谢您的代码正在同时触发两个元素的悬停事件，因此悬停在单个元素上会更改这两个元素的背景颜色，这似乎不是OP想要的。@DeoElectrix仔细看，只有一个元素。它调用这两个元素的更改只是为了缩短代码，但一次只存在一个元素。上面评论中Regent的方法更好，但这也是完全可以接受的。我是jquery新手，所以需要了解这个解决方案。一旦我理解了代码，我会给这个解决方案打分。@Delighted0d我道歉，你说得对，我想到了两个不同的元素-我想这将有助于实际运行你的示例…；）我没有把它绑定到子菜单上。但所有3个按钮都在div子菜单中。这不意味着它对所有3个按钮的作用都是一样的吗？这意味着它应用于子菜单覆盖的整个区域，覆盖了嵌套在其中的所有内容-想象一下它就像在一张纸上画两个盒子，你希望有人告诉你，当一个扔出的回形针落在其中一个盒子里时，但你实际告诉他们的是，当回形针落在纸上时，他们会告诉你。你会在这里看到所有的回形针都会落在盒子里，但你也会看到每一个没有落在盒子里的回形针都会落在纸上。我还需要一个可以点击的临时按钮。因为，悬停不起作用了，我不认为
#knight {
  background-color: blue;
}
#knight:hover {
  background-color: green;
}