Question

我和合作伙伴一起在Odin项目上js/JQuery project工作，我们用最后一项任务撞墙，就是增加方块的不透明度。鼠标重新进入它们。我们在尝试通过两个css类实现此目的时遇到困难，并为每个类创建了mouseenter事件。

基本上，我们希望从所有正方形开始为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是整个项目的小提琴。输入一些数字开始，然后点击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

Odin Project使用多个事件处理程序来解决草图问题

1 个答案: