javascript - jquery 事件中的 JS : cannot read this. data()

Question

我对 JS 有点陌生，所以这可能很容易解决。 我只是想在鼠标进入元素时更改交互式 map 元素的不透明度和颜色，并在鼠标离开时将其更改回来。

这就是我正在做的事情:

var paper = Raphael('map', '100%', '100%');

// map contents
var rect = paper.rect(3.5714281, 74.505051, 151.42857, 143.57143).attr({
    x: '3.5714281',
    y: '74.505051',
    fill: '#ffb380',
    stroke: '#ff6600',
    'stroke-width': '1',
    'stroke-opacity': '1'
}).transform("t6.9285719,8.1378246").data('id', 'rect');

var crcl = paper.path("m 472.14285,202.00504 a 72.5,72.5 0 1 1 -145,0 72.5,72.5 0 1 1 145,0 z").attr({
    fill: '#916f6f',
    stroke: '#6c5353',
    'stroke-width': '1',
    'stroke-opacity': '1'
}).transform("t6.9285719,8.1378246 t-245,-127.14286").data('id', 'crcl');

var objs = [];
objs.push(rect, crcl);

for (var i = objs.length - 1; i >= 0; i--) {
        objs[i].data('original-fill', objs[i].data('fill'));

        objs[i].mouseover(function(event) {
            damn = this.data('fill');
            this.stop(true, false).animate({
                    opacity: 0.7,
                    fill: 'white',
                },
                75);
        });

        objs[i].mouseout(function(event) {
            this.stop(true, false).animate({
                    opacity: 1,
                    fill: this.data('original-fill'),
                },
                200);
        });
    };

但是每次我将鼠标移出时，它都会设置为“无”，就像 this.data('original-fill') 未设置一样。尽管我可以在 mouseover 和 mouseout 之外访问 objs[i].data('original-fill')。

我正在使用 Raphaël JS 库。

如果有任何帮助，我将不胜感激。

Answer 1

如果 CSS 在您的项目库中，它会提供 transition 属性和 :hover 属性，以便在鼠标悬停事件时在一段时间内为样式设置动画。如果您可以使用 CSS，那么这可以实现您在预期行为中概述的内容(只需将 div 替换为您想要设置动画的元素上的类):

div {
    opacity: 1;
    background-color: #000;

    transition: opacity .2s;
    transition: background-color .2s;
} 

div:hover {
    background-color: #FFF;
    opacity: .7;
}

这不是一个 JavaScript 解决方案，但如果您的悬停需求与样式严格相关，那么它会更加优雅