JS:无法读取 jquery 事件中的 this.data()
JS: cannot read this.data() in jquery event
我对 JS 有点陌生,所以这可能很容易解决。
我只是想在鼠标进入元素时更改交互式地图元素的不透明度和颜色,并在鼠标离开时更改回来。
这就是我正在做的事情:
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);
});
};
但每次我将鼠标移出时,它都会设置为 'none',就像 this.data('original-fill') 未设置一样。虽然我可以在 mouseover 和 mouseout[=27= 之外访问 objs[i].data('original-fill') ].
我正在使用 Raphaël JS 库。
如有任何帮助,我将不胜感激。
如果 CSS 在您的项目库中,它会提供一个 transition
属性 和一个 :hover
属性,以便在鼠标悬停时在一段时间内对样式进行动画处理事件。如果 CSS 是您能够使用的东西,这可以完成您在预期行为中概述的内容(只需将 div
替换为 class 在您要查找的元素上动画):
div {
opacity: 1;
background-color: #000;
transition: opacity .2s;
transition: background-color .2s;
}
div:hover {
background-color: #FFF;
opacity: .7;
}
这不是 javascript 解决方案,但如果您的悬停需求严格与样式相关,则它会更加优雅
我对 JS 有点陌生,所以这可能很容易解决。 我只是想在鼠标进入元素时更改交互式地图元素的不透明度和颜色,并在鼠标离开时更改回来。
这就是我正在做的事情:
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);
});
};
但每次我将鼠标移出时,它都会设置为 'none',就像 this.data('original-fill') 未设置一样。虽然我可以在 mouseover 和 mouseout[=27= 之外访问 objs[i].data('original-fill') ].
我正在使用 Raphaël JS 库。
如有任何帮助,我将不胜感激。
如果 CSS 在您的项目库中,它会提供一个 transition
属性 和一个 :hover
属性,以便在鼠标悬停时在一段时间内对样式进行动画处理事件。如果 CSS 是您能够使用的东西,这可以完成您在预期行为中概述的内容(只需将 div
替换为 class 在您要查找的元素上动画):
div {
opacity: 1;
background-color: #000;
transition: opacity .2s;
transition: background-color .2s;
}
div:hover {
background-color: #FFF;
opacity: .7;
}
这不是 javascript 解决方案,但如果您的悬停需求严格与样式相关,则它会更加优雅