jquery - 如何将多个 jQuery 鼠标悬停函数组合成一个可重用的鼠标悬停函数

Question

我用 D3 创建了一张 map ，并使用以下 json 文件(名为 city.json)在 map 上添加了城市名称和标绘点:

[
{"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}
]

城市点和城市名称在 map 上完美显示。每个点和名称都有一个类名/编号(使用 d3)，因此我可以针对每个特定元素。

然后我使用 jQuery 向城市点添加了鼠标悬停和鼠标移出功能，这样我就可以显示该点的纬度 (lat) 和经度 (lon)，这些信息写入 json 文件。一切都很好，当我将鼠标悬停在不同的点上时，会显示正确的信息，而当我将鼠标移开时，它就会消失。下面是我的 jQuery mouseover/out 函数:

 $(".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");
}); 

如果可能的话，我喜欢做的是将 mouseover 函数合并为一个函数，将 mouseout 函数合并为一个函数，并且仍然显示来自 json 文件的正确信息(当用户将鼠标悬停在一个点上以及正确的 lat 和长数据会显示)。

另外我喜欢这个功能是可扩展的，能够将新添加的信息(点)容纳到json文件中(可以将鼠标悬停在新添加的点上并显示正确的数据)。

我希望这个问题/问题是清楚的，我真的很感谢任何人对这个问题的帮助。提前致谢。托尼T

Answer 1

你能给所有的 citypoints 添加一个类并触发它吗？:

$(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 的不同成员