javascript - 如何使用 JS 中的 map 按钮切换 map 位置？

Question

我正在创建一个新的 svg map ，并希望通过鼠标悬停(恢复)每个位置的地点细节并通过鼠标移出(隐藏)它。但是当一个位置被点击时，想要停留在当前位置。

我可以通过编写大量代码来做到这一点，但想知道是否有更好的方法来使用 JS(而不是 JQuery)编写更少的代码。 我这样做了(但我有很多位置的按钮和位置。

var firstlocBut = document.getElementById("firstlocBut");
 var firstlocation = document.getElementById("firstlocation");
 var SecLocBut = document.getElementById("secLocBut");
 var SecLocation = document.getElementById("secLocation");

 function mousover(e){

        if(e.getAttribute("id") == ("firstlocBut")) {
firstLocation.classList.add ("revialLocationclass")
        } else if(e.getAttribute("id") == ("SecLocBut")){
        SecLocation.classList.add ("revialLocationclass")
         }};

function mousleave(e){
        if(e.getAttribute("id") == ("firstlocBut")) {
firstlocBut.classList.remove ("revialLocationclass")
        }else if(e.getAttribute("id") == ("SecLocBut")){
SecLocation.classList.remove ("revialLocationclass")
        }};

function onclick(){
if(e.getAttribute("id") == ("firstlocBut")) {
firstBut.classList.add("revialLocationclassforever")
}else if(e.getAttribute("id") == ("secLocBut")) {
SecLocBut.classList.add("revialLocationclassforever")
}};

我想这样做:

onmouseover(在某个位置的按钮上)= {隐藏所有位置并仅显示当前位置。

onmouseout(来自位置的按钮)={隐藏所有位置(点击除外)。

onclick(在位置按钮上)={如果它的位置已经被修改，隐藏它，否则重新修改它(反之亦然)(永远)。

Answer 1

新答案(基于添加的信息)

免责声明:所有代码均未经测试!

看完你的网站后，我会这样做:

获取所有top level g 元素并给它们一个内容id，例如:(当然，如果你有所有元素的id，使用那些和我我确定您能够以某种方式创建一个数组来循环遍历它。如果没有，请写信给我，但请先尝试)

<g contentId="1">[...]</g>

(当然你可以随便叫什么)

然后在 JavaScript 中，您可以创建一个数组，其中包含所有文本或您想要显示的任何内容，并循环遍历具有内容 ID 的所有元素，如下所示:

let contentTable = [
    {title: "Foo", detail: "Bar"},
    {title: "Hello", detail: "World"}
]

Array.from(document.querySelectorAll('g [contentId]')).forEach(element => {
    let contentId = element.getAttribute('contentId');

    // Here add your mouse listeners like
    element.addEventListener('[...]', () => [...]);

});

或者，如果您想要更具可读性的代码，您可以使用对象而不是元素，因此 html 将是:

<g contentId="hauptbahnhof">[...]</g>

和 JavaScript 代码:

let contentTable = {
    hauptbahnhof: {[...]},
    [...]
}

我是不是还漏掉了什么重要的东西？在评论中打我!

旧答案

这是一个非常原始的例子，我会怎么做。我没有编写任何花哨的显示代码，只编写了最低限度的代码，并在鼠标进入和离开时登录到控制台。

// Constants

// List of "locations"
const locations = [
  {"color": "blue", "location": "New York"},
  {"color": "green", "location": "Foo"},
  {"color": "yellow", "location": "bar"},
  {"color": "red", "location": "Rio"}
]

// DOM Elements... also constants :D
const container = document.getElementById('container');

// Create "location markers"
locations.forEach(location => {
  // Create location element
  let e = document.createElement('div');
  // Some primitive styling
  e.style.backgroundColor = location.color;
  e.style.height = "10px";
  
  // Add hover event listener
  e.addEventListener('mouseenter', () => {
    // Here some fancy display stuff
    // I'm just logging it
    console.log(`Hover enter; Location: ${location.location}`)
  });
  e.addEventListener('mouseleave', () => {
    // Here some fancy removal of added display stuff
    // Again, just logging that the mouse left
    console.log(`Hover leave; Location: ${location.location}`)
  })
  
  // Append the child to a container
  container.appendChild(e);
});

<div id="container" style="border: 1px solid black">

</div>