Question

我使用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将mouseover和mouseout函数添加到城市点，这样我就可以显示该点的纬度（lat）和经度（lon），这些信息写在json文件中。一切都很好，当我鼠标悬停在不同的点上时，显示正确的信息，当我鼠标移除它时消失。下面是我的jQuery鼠标悬停/输出功能：

 $(".cityPoints1").mouseover(function() {
   d3.select("div.tooltip")
   .html([citiesData[1].lon, "&nbsp;" + 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,"&nbsp;" + 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文件（可以鼠标悬停新添加的点，并显示正确的数据）。

我希望这个问题/问题很明确，我非常感谢任何人对这个问题的帮助。提前致谢。 TonyT

Answer 1

我建议为目标元素创建变量，而不是将其传递给DOM对象，如下所示

 var city1 = $('.cityPoints1');

然后使用事件处理程序.on将触发它们

city1.on('mouseover mouseout', function(){
    city1.stop();
});

希望它会有所帮助

Answer 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/

如果您无法添加该类，并且所有城市点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的不同成员

如何将几个jQuery鼠标悬停功能组合成一个可重复使用的鼠标悬停功能

2 个答案: