Как совместить несколько функций JQuery наведения курсора мыши в одну многоразовую функцию наведения мыши

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), поэтому я могу настроить таргетинг на каждый конкретный элемент.

Затем я добавил функцию mouseover и mouseout, используя 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"); 
}); 

Что мне нравится делать, и если это возможно, является совмещение функций наведении курсора мыши в одну функцию и функцию MouseOut в одной функции, и по-прежнему отображать правильную информацию от JSON файл (когда пользователь наведет точку на точку и вернет лат и длинные данные).

Также мне нравится функция, которая может быть расширена, способна вместить новую добавленную информацию (точки) в json-файл (может отображаться новая добавленная точка и отображать правильные данные).

Я надеюсь, что эта проблема/вопрос ясен, и я очень ценю чью-либо помощь в этой проблеме. Заранее спасибо. TonyT

Answer 1

Можете ли вы добавить класс ко всем точкам города и просто отключить это ?:

$(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 в формате 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

Answer 2

Я хотел бы предложить создать переменные для целевых элементов, а не передать его в объект DOM, как показано ниже

var city1 = $('.cityPoints1'); 

затем с помощью обработчику событий .on вызовут их

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

Надеется, что это будет help