我正在与一个合作伙伴一起在The Odin Project上的js/JQuery project上工作,而我们的最后一项任务是碰壁,这是在鼠标重新进入正方形时增加正方形的不透明度。我们在尝试通过两个CSS类来实现此目的并为每个类创建mouseenter事件时遇到了麻烦。

本质上,我们要以所有正方形作为grey类开始,并在首次输入它们之后为它们分配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即可使用此功能。

最佳答案

更简单的解决方案是类似于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

关于javascript - Odin Project用多个事件处理程序 eclipse 刻草图问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29000952/

10-12 07:29
查看更多