Question

我有一个div（我用一个带.click的按钮）和骑士的ID。
每当我按下3个按钮中的任何一个（包括骑士）时，它会将骑士的身份改为精灵（是的，我是在做游戏）。
我有骑士.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');
    });

当我按下任何按钮（子菜单）时，文字变为“精灵”。并且颜色变成了id为#elf

的css中的颜色

CSS

#knight{
    background-color: blue;
    height: 20px;
    width: 100px;
}

#elf{
    background-color: #00FF00;
    height: 20px;
    width: 100px;
}

所以我假设当我在id更改后将鼠标悬停在它上面时，它需要以下代码：

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

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

有人可以帮助我吗？

编辑＃1

我忘了显示div id knight，这是带有.click功能的实际按钮

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

$('.submenu。。click函数的位置。此外，如果有人知道删除文本和这些按钮的另一种方法，如果你点击一个新的，请告诉我。我知道我忘了添加一些东西。

Answer 1

在制作游戏时，我假设您的实际代码在您的事件处理程序中有更多功能。如果是这种情况，则以下方法可以使用event delegation并使用classes代替ids。

如果您想要的效果/动作都能通过CSS实现，那么https://jsfiddle.net/fy3s917w/1的摄政解决方案实际上要好得多

＆＃13;

// bind a function to an element (#container) that contains the elements we want to affect 
// you could also bind to document but it's better to bind to an element closser to the targets
// the handler will listen for events on the container's descendants that match the selectors provided (.knight and .elf)
$("#container").on('mouseover', '.knight, .elf', function() {
  // change the css for both classes, this just stops us from having to have 2 separate functions, only one element will exist at a time on the actual page
  $(".knight").css('background-color', 'green');
  $(".elf").css('background-color', '#01DF01');
});
// same thing here but for the mouseout event
$("#container").on('mouseout', '.knight, .elf', function() {
  $(".knight").css('background-color', 'blue');
  $(".elf").css('background-color', '#00FF00');
});
// when the button is clicked, use `toggleClass` to remove the 'knight' class and add the 'elf' class
// i've added `.css('background-color', '#00FF00')` to the end because web-kit browsers wont redraw the element and update the style when we change a class if the style was originally set with `.css()`
$('.submenu').click(function(e) {
  $('.knight').toggleClass( 'knight, elf' ).text('Elf').css('background-color', '#00FF00');
});

＆＃13;

.knight {
      background-color: blue;
      height: 20px;
      width: 100px;
    }
.elf {
      background-color: #00FF00;
      height: 20px;
      width: 100px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="knight"></div>
</div>
<input type="button" class="submenu" value="change unit type" />

＆＃13;

Answer 2

在更改ID之前在click事件中使用('#knight').off('hover')以删除旧的悬停事件。更改id后，还会在click事件中绑定新的悬停。更多信息：jQuery/off

Answer 3

它完全按照你的要求去做。你已经将功能绑定到了＆＃34;子菜单＆＃34; div本身。而不是其中的任何元素。

尝试更改为

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

Answer 4

一种方法是删除使用jQuery创建的悬停并使用CSS

$('#knight').hover(...);

之后，当您正在制作游戏时，您可能希望保持jQuery客户端以产生悬停效果。问题是当你打电话给class Foo { constructor(private name:string) { } public somefunc() { console.log("someFunc called on", this.name); } public anyfunc() { console.log("anyFunc called on", this.name); } } function bar(obj: Foo, func: string) { if (obj[func] && obj[func] instanceof Function) { obj[func](); } else { throw new Error("Function '" + func + "' is not a valid function"); } } bar(new Foo("foo1"), "somefunc"); // output: 'somefunc called on foo1' bar(new Foo("foo2"), "anyfunc"); // output: 'anyfunc called on foo1' bar(new Foo("foo3"), "badFunction"); // throws: Error: Function 'badFunction' is not a valid function时，你会向#knight添加一个悬停功能，然后女巫与之相关联。

即使您更改了ID，它也会保留您在加载页面时给出的功能。

您应该考虑删除与旧按钮关联的每个事件，并创建新的.hover事件，而不仅仅是更改ID。

Jquery id更改.attr不能完全正常工作

4 个答案: