我正在与一个合作伙伴一起在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/