Я создаю новую карту 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 (на кнопке местоположения) = {если это местоположение уже раскрыто, скрыть его, в противном случае оживить его (и наоборот) (навсегда).

2
HamiD 26 Мар 2019 в 12:45

1 ответ

Лучший ответ

Новый ответ (на основе добавленной информации)

Отказ от ответственности : Ни один код не тестировался!

Посмотрев на ваш сайт, я бы сделал следующее:

Получите все элементы верхнего уровня g и дайте им идентификатор содержимого, например: (Конечно, если у вас есть идентификаторы для всех элементов, используйте их, и я уверен, что вы сможете создайте массив как-нибудь, чтобы перебрать его. Если нет, напишите мне, но сначала попробуйте)

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

(конечно, вы можете называть это как хотите)

Затем в JavaScript вы можете создать массив со всеми текстами или тем, что вы хотите отобразить, и перебрать все элементы с таким идентификатором содержимого:

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>
1
Elias 3 Апр 2019 в 06:09