Raphael を使用して描かれた米国の州と郡の地図があります。さらに、各パスにはmouseover
andmouseout
イベントがバインドされています。要素 ID としての FIPS ID 番号としての各パス
jQuery オートコンプリート テキスト入力ボックスもあります。keyup
候補ドロップダウン リストのイベントで、関連するパス IDイベント ハンドラーをkeydown
トリガーしたいと考えています。mouseover
によって描かれた地図を考えると:
function drawMap(data) {
map = Raphael(document.getElementById("us_map_container", 555, 352));
var pathCount = data.length;
for (i = 0; i < pathCount; i++) {
var currentPath = map.path(data[i][2]),
pid = data[i][1],
pname = data[i][0];
currentPath.node.setAttribute("id", pid);
currentPath.node.setAttribute("name", pname);
currentPath.attr({"stroke" : "#FFFFFF", "fill" : "#CBCBCB", "stroke-width" : "0.2"});
currentPath.mouseover(function(e){countyMouseOver(e)});
currentPath.mouseout(function(e){countyMouseOut(e)});
}
}
および関連するmouseover
イベント:
function countyMouseOver(e) {
var hover = e.target;
var name = hover.getAttribute("name");
if (name != "#State_borders") {
$(hover).attr({"stroke" : "#FF0000", "stroke-width" : "1", "fill" : "#FF0000"});
console.log("Name: " + name + " ID: " + hover.id);
}
}
keypress
このリスナーを使用してトリガー イベントを実行するにはどうすればよいですか?
$("#county_search_autocomplete").keypress(function(e) {
if (e.which == 13){
var index = $.inArray($(this).val(), counties)
if (index > 0){
console.log("FIPS: " + counties[i].id);
}
}
else if (e.which == 38 || e.which == 40){
//trigger Raphael mouseover event... how?
}
});