jquery - 如何将多个mouseenter事件与Jquery结合起来？

Question

我正在尝试将多个鼠标输入到子元素中，为这些元素添加类。但不幸的是它不起作用......

这里是代码示例以及它正在做什么。 http://js.do/Aleqxs/fonction_html

首先鼠标将我的 ligne“NOIR ET BLANC”转换为“ROUGE ET NOIR”我的第二个鼠标应该将“ROUGE”转换为红色...但这不起作用。

Answer 1

我认为问题是复制粘贴错误，您使用

$(".change_into_red").mouseenter(function(){
 $(".this").addClass("red");
});

什么时候应该

$(".change_into_red").mouseenter(function(){
 $(this).addClass("red");
});

此外，当您尝试包含这行 html

var code_avec_html = '<span class="change_into_red">ROUGE</span> ET NOIR';

在 jQuery 的 html 函数中是这样的

$(this).html(code_avec_html);

它将可以显示该 html，但是，任何要对该 html 中的类起作用的事件只有在被委托(delegate)时才起作用。委托(delegate)。您当前的设置仅分配这些事件一次。为了让这些事件也适用于 future 的元素，您需要使用带有 delegate 函数的委托(delegate)。

$("body").delegate(".change_into_red", "mouseenter", function () {
 $(this).addClass("red");
});

$("body").delegate(".change_into_red", "mouseleave", function () {
 $(this).removeClass("red");
});