javascript - Odin 元素使用多个事件处理程序 eclipse 刻草图问题

Question

我正在研究 js/JQuery project在与合作伙伴的 Odin 元素中，我们在最后一个任务中遇到了困难，即在鼠标重新进入方 block 时增加方 block 的不透明度。我们在尝试通过两个 css 类实现此目的并为每个类创建 mouseenter 事件时遇到了困难。

本质上，我们希望所有方 block 都是 grey 类，在第一次输入它们后，将它们分配给 fiftyshades 类。随后输入它们时，我们希望 fiftyshades 类的事件处理程序增加不透明度。

但是，一旦该元素具有这两个类，它就永远不会进入 fiftyshades 的 mouseenter 函数，只会进入灰色。我们已经通过将不透明逻辑放在 grey.mouseenter 中解决了这个问题，但是根据 this答案，我认为我们原来的方法应该有效。这表示应该调用两个处理程序，但调试时我可以清楚地看到从未输入 fiftyshades.mouseenter。

这是我们为这个功能摆弄了很多相关 javascript 之后的立场:

$("#fiftyshades").click(function() {
reset();

$(".grey").mouseenter(function(){
    if (!$(this).hasClass("fiftyshades"))
    {
        $(this).addClass("fiftyshades");
        console.log("Adding fiftyshades")
        if ($(this).hasClass("fiftyshades"))
        {
            console.log("Add was success");
            console.log("Classes: ")
            var className = $(this).attr('class');
            console.log("     " + className);
        }
    }
});

$(".fiftyshades").mouseenter(function(){
    var shade =  parseFloat($(this).css("opacity"));
    console.log("Shade: " + shade);
    if (shade < 1) {
        $(this).css("opacity", shade + 0.1);
    }
});
});

Here这是整个元素的 fiddle 。输入一些数字作为开头，然后点击 Reset fifty shades 以访问此功能。

Answer 1

更简单的解决方案类似于 this

$(".grey").mouseenter(function(){
  var opacity = $(this).data('opacity') || 0;
  $(this).css("opacity", opacity = (parseInt(opacity) == 1 ? opacity : opacity + 0.1));
  $(this).data('opacity', opacity);      
});

但是对于你的实际问题

您在元素实际存在于 DOM 之前分配处理程序，您应该做的是 event delegation

$(".container").on('mouseenter', ".fiftyshades", function (e) {
    var shade = parseFloat($(this).css("opacity"));
    console.log("Shade: " + shade);
    if (shade < 1) {
        $(this).css("opacity", shade + 0.1);
    }
});

参见 updated fiddle