提问人：TonyT 提问时间：6/29/2015 最后编辑：m2jTonyT 更新时间：6/29/2015 访问量：191
如何将多个jQuery鼠标悬停函数组合成一个可重用的鼠标悬停函数
How to combine several jQuery mouseover functions into one reusable mouseover function
问：
我用 D3 创建了一张地图，并使用以下 json 文件（名为 city.json）在地图上添加了城市名称和绘制点：
[
{"id":0,"name":"Damascus","lat":33.5131,"lon":36.2919,"graphic":"","marksLat":null,"marksLong":null},
{"id":1,"name":"Aleppo","lat":36.2167,"lon":37.1667,"graphic":"","marksLat":null,"marksLong":null},
{"id":2,"name":"Ar Raqqah","lat":35.95,"lon":39.0167,"graphic":"","marksLat":null,"marksLong":null},
{"id":3,"name":"","lat":null,"lon":null,"graphic":"graphic/star.png","marksLat":33.5131,"marksLong":36.2919}
]
城市点和城市名称完美地显示在地图上。每个点和名称都被赋予了一个类名/编号（使用 d3），因此我可以针对每个特定元素。
然后，我使用 jQuery 向城市点添加了一个鼠标悬停和鼠标输出函数，以便我可以显示该点的纬度 （lat） 和经度 （lon），这些信息写入 json 文件中。一切正常，当我将鼠标悬停在不同的点上时，会显示正确的信息，而当我鼠标退出时，它会消失。以下是我的jQuery鼠标悬停/输出函数：
$(".cityPoints1").mouseover(function() {
d3.select("div.tooltip")
.html([citiesData[1].lon, " " + citiesData[1].lat])
.style("visibility", "visible")
.style("top", "100px")
.style("left", "100px");
});
$(".cityPoints1").mouseout(function() {
d3.select("div.tooltip")
.html([citiesData[1].lon, citiesData[1].lat])
.style("visibility", "hidden");
});
$(".cityPoints2").mouseover(function() {
d3.select("div.tooltip")
.html([citiesData[2].lon," " + citiesData[2].lat])
.style("visibility", "visible")
.style("top", "100px")
.style("left", "100px");
});
$(".cityPoints2").mouseout(function() {
d3.select("div.tooltip")
.html([citiesData[2].lon, citiesData[2].lat])
.style("visibility", "hidden");
});
我喜欢做的，如果可能的话，是将鼠标悬停函数合并为一个函数，将鼠标输出函数合并为一个函数，并且仍然显示 json 文件中的正确信息（当用户将鼠标悬停在一个点上时，将显示正确的纬度和经度数据）。
此外，我喜欢该函数是可扩展的，能够将新添加的信息（点）容纳到 json 文件中（可以将鼠标悬停在新添加的点上，将显示正确的数据）。
我希望这个问题/问题是清楚的，我真的很感谢任何人对这个问题的帮助。提前致谢。托尼T的
答：
0赞
Durdona A.
6/29/2015
#1
我建议为目标元素创建变量，而不是将其传递给 DOM 对象，如下所示
var city1 = $('.cityPoints1');
然后使用事件处理程序将触发它们.on
city1.on('mouseover mouseout', function(){
city1.stop();
});
希望它会有所帮助
0赞
NiteTrip
6/29/2015
#2
你能把一个类添加到所有城市点并触发它吗？
$(document).ready(function() {
$("div.citypoint").mouseover(function (e) {
mouseOver_Event(e);
});
});
function mouseOver_Event(e) {
console.log(e);
var x = $(e.target).attr("id");
alert(x);
}
我把它放在这个jsfiddle上：
https://jsfiddle.net/2ppjf2f7/
如果无法添加类，并且所有 citypoints ID 的格式均为 citypointX，则可以使用 jQuery startswith 选择器来触发：
$('[id^=cityPoint]')
所以代码是这样的（https://jsfiddle.net/a2466qhc/）：
$(document).ready(function() {
$('[id^=cityPoint]').mouseover(function (e) {
mouseOver_Event(e);
});
});
function mouseOver_Event(e) {
console.log(e);
var x = $(e.target).attr("id");
alert(x);
}
在 jsFiddle 上，您可以查看控制台日志 （F12？） 并查看 e 的不同成员
评论
0赞
moonwave99
6/29/2015
$('[id^=cityPoint]').mouseover(mouseOver_Event)就足够了^^
0赞
TonyT
6/29/2015
哇。。。谢谢。我喜欢这个概念，但是我如何包含json信息。当我将鼠标悬停在该点上时，我如何循环并显示与城市点相对应的正确 json 信息（纬度和纬度）......还是我在某个地方错过了重点？
评论