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

Question

好的，所以我有一个我制作的svg地图，我的目标是：

1. 点击每个svg路径后显示信息
2. 单击其他路径时，隐藏上次单击的路径的信息，只显示单击的路径信息

我目前有两个选项中的第一个，但我不知道如何在单击另一个路径时隐藏旧信息。。。我提供的片段只有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元素的取消引用来获得要显示的文本元素的正确类名。如果您更改了类的命名，您也必须更改相关的代码。