新答案（基于添加的信息）

Question

我正在创建一个新的svg映射，并希望通过鼠标悬停（隐藏）每个位置的位置细节，并通过鼠标悬停（隐藏）它的位置。但是点击某个位置后，想要保留当前位置。

我可以通过编写很多代码来做到这一点，但是我想知道是否存在更好的方法来用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

新答案（基于添加的信息）

免责声明：没有任何代码未经测试！

查看您的网站后，这就是我要做的事情：

获取所有顶级 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>

如何使用JS中的“地图”按钮切换地图位置？

1 个答案:

新答案（基于添加的信息）

旧答案