如何使 svg 地图在区域点击时隐藏信息

Question

好的，我制作了一张 svg 地图，我的目标是：

1. 点击每个 svg 路径时显示信息。
2. 当点击不同的路径时，隐藏最后点击路径的信息，只显示被点击路径的信息。

我目前有 2 个选项中的第一个可以工作，但我不知道如何在单击另一条路径时隐藏旧信息... 我提供的 sn-p 只有 3 个，但完整的东西有大约 30 个路径，以防万一需要这些信息。

我是菜鸟，所以如果有任何改进代码的方法也欢迎分享:)

这是一个带有一点点的代码笔：https://codepen.io/aj-francis/pen/bGWppbm

  window.addEventListener('load', function() {
  var lot101 = document.getElementsByClassName('lot101')[0];
  var lot102 = document.getElementsByClassName('lot102')[0];
  var lot103 = document.getElementsByClassName('lot103')[0];

  lot101.addEventListener('click', function() {
    document.getElementsByClassName("lot-content")[0].style.display = 'none';
    document.getElementsByClassName('lot101-content')[0].style.display = 'block';
  });
  lot102.addEventListener('click', function() {
    document.getElementsByClassName("lot-content")[0].style.display = 'none';
    document.getElementsByClassName('lot102-content')[0].style.display = 'block';
  });
  lot103.addEventListener('click', function() {
    document.getElementsByClassName("lot-content")[0].style.display = 'none';
    document.getElementsByClassName('lot103-content')[0].style.display = 'block';
  });
});

.path{
  transition: all 0.5s ease;
}
.path:hover {
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.5s ease;
}
.interactive-map{
  width: 100%;
  display: flex;
  padding: 40px 30px;
}
.interactive-map .lot-info{
  width: 45%;
  margin-right: 5%;
}
.interactive-map .svg-map{
  width: 50%;
}
.interactive-map .lot-info .lot-content{
  display: none;
}

<section class="interactive-map">

<div class="lot-info">
<div class="lot-content lot101-content">
  <h1>Lot 101</h1>
  <h4>SQ-FT || SQ-M</h4>
  <h5>LOT PRICE</h5>
</div>
<div class="lot-content lot102-content">
  <h1>Lot 102</h1>
  <h4>SQ-FT || SQ-M</h4>
  <h5>LOT PRICE</h5>
</div>
<div class="lot-content lot103-content">
  <h1>Lot 103</h1>
  <h4>SQ-FT || SQ-M</h4>
  <h5>LOT PRICE</h5>
</div>
</div>

<div class="svg-map">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 947.38 652.28"><title>SB-Hills</title>

  <path class="path lot101" d="M232.74,704.06a79.87,79.87,0,0,1,16.69,20.65c7.37,1.9,54.57,14.17,66.4,19.43,4.14,1.84,5.23,1.31,5.24,1.31.22-.41-.17-2.38-1-4.05l-.13-.33-8.45-28.2-1.42-45.5.24-.47c11.57-23.18-5.59-35.94-6.33-36.47l-.22-.19-26.18-25-80.07,59.45Z" transform="translate(-62.62 -231.09)" fill="#222629"/>

  <polygon class="path lot102" points="50.38 347.82 114.11 418.27 184.34 354.22 182.41 353.02 154.41 299.75 50.38 347.82" fill="#222629"/>

  <path class="path lot103" d="M81,437.11l-12.49,43c-1.8,4.05-2.21,7.43-1.18,9.77a5.27,5.27,0,0,0,2.72,2.75l.59.2,28.74,36v9.57l120-32.57.07-.59,26-56.21c-36.17-13.33-115.73-42.54-127.27-46.26Z" transform="translate(-62.62 -231.09)" fill="#222629"/>



<!-- SVG PATHS, OUTLINES & TEXT -->
<!-- no styles or editing required past here until closing svg tag.. -->

</svg>
</div>
</section>

Answer 1

将通常的解决方案（循环遍历具有相同类名的所有元素）应用于您的代码将是这样的：

function popElem(el) {
  var elems = document.getElementsByClassName('lot-content');
  for (i = 0; i < elems.length; i++) {
    elems[i].style.display = 'none';
  }
  var clickedPath = el.target.className.baseVal.split("path").pop();
  document.getElementsByClassName(clickedPath + "-content")[0].style.display = 'block';
}

window.addEventListener('load', function() {
  var elems = document.getElementsByClassName('path');
  for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    elem.addEventListener('click', function(elem) {
      popElem(elem);
    });
  }
});

.path{
  transition: all 0.5s ease;
}
.path:hover {
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.5s ease;
}
.interactive-map{
  width: 100%;
  display: flex;
  padding: 40px 30px;
}
.interactive-map .lot-info{
  width: 45%;
  margin-right: 5%;
}
.interactive-map .svg-map{
  width: 50%;
}
.interactive-map .lot-info .lot-content{
  display: none;
}

<section class="interactive-map">

<div class="lot-info">
<div class="lot-content lot101-content">
  <h1>Lot 101</h1>
  <h4>SQ-FT || SQ-M</h4>
  <h5>LOT PRICE</h5>
</div>
<div class="lot-content lot102-content">
  <h1>Lot 102</h1>
  <h4>SQ-FT || SQ-M</h4>
  <h5>LOT PRICE</h5>
</div>
<div class="lot-content lot103-content">
  <h1>Lot 103</h1>
  <h4>SQ-FT || SQ-M</h4>
  <h5>LOT PRICE</h5>
</div>
</div>

<div class="svg-map">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 947.38 652.28"><title>SB-Hills</title>

  <path class="path lot101" d="M232.74,704.06a79.87,79.87,0,0,1,16.69,20.65c7.37,1.9,54.57,14.17,66.4,19.43,4.14,1.84,5.23,1.31,5.24,1.31.22-.41-.17-2.38-1-4.05l-.13-.33-8.45-28.2-1.42-45.5.24-.47c11.57-23.18-5.59-35.94-6.33-36.47l-.22-.19-26.18-25-80.07,59.45Z" transform="translate(-62.62 -231.09)" fill="#222629"/>

  <polygon class="path lot102" points="50.38 347.82 114.11 418.27 184.34 354.22 182.41 353.02 154.41 299.75 50.38 347.82" fill="#222629"/>

  <path class="path lot103" d="M81,437.11l-12.49,43c-1.8,4.05-2.21,7.43-1.18,9.77a5.27,5.27,0,0,0,2.72,2.75l.59.2,28.74,36v9.57l120-32.57.07-.59,26-56.21c-36.17-13.33-115.73-42.54-127.27-46.26Z" transform="translate(-62.62 -231.09)" fill="#222629"/>

<!-- SVG PATHS, OUTLINES & TEXT -->
<!-- no styles or editing required past here until closing svg tag.. -->
</svg>
</div>
</section>

正如您所见，在循环中添加事件侦听器代码也是可能的，因此如果它们的交互功能应该相同，您可以简单地避免处理寻址单个元素的代码。

注意我已经使用了一些 SVG 元素的解引用来获得要显示的文本元素的正确类名。如果您更改类的命名，您也必须更改相关代码。