我在一个社区当救护员,那里的随机门牌号码不符合任何可识别的模式。在地图上扫描一个不熟悉的门牌号码可能需要花费宝贵的时间。我已经制作了房屋和房屋编号的SVG地图,我想通过在文本字段中输入房屋编号来突出显示合适的房屋,以用作getElementByIdJS函数中的变量,更改该元素的SVG“fill”属性,突出显示正确的房屋。我对JS的了解还很初级,在我的搜索中还没有找到任何实现这一点的例子。我下面的例子是一个完全拼凑的例子,但说明了我正在尝试做什么,除了使用文本输入而不是每个房子的按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test SVG</title>
<style>
.default {
fill: #008000;
stroke: #000000;
stroke-width: 3px;
width: 150px;
height: 50px;
}
.selected {
fill: #ff0000;
stroke: #000000;
stroke-width: 3px;
width: 150px;
height: 50px;
}
text {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
div {
padding-left: 30px;
}
</style>
</head>
<body>
<svg width="500" height="500">
<g>
<circle class="default" id="01" cx="380" cy="400" r="40" />
<text x="373" y="408">1</text>
</g>
<g>
<circle class="default" id="02" cx="380" cy="60" r="40" />
<text x="373" y="68">2</text>
</g>
<g>
<circle class="default" id="03" cx="80" cy="240" r="40" />
<text x="74" y="248">3</text>
</g>
<g>
<circle class="default" id="04" cx="430" cy="210" r="40" />
<text x="423" y="218">4</text>
</g>
<g>
<circle class="default" id="05" cx="110" cy="60" r="40" />
<text x="103" y="68">5</text>
</g>
<g>
<circle class="default" id="06" cx="230" cy="130" r="40" />
<text x="224" y="138">6</text>
</g>
<g>
<circle class="default" id="07" cx="130" cy="370" r="40" />
<text x="124" y="378">7</text>
</g>
<g>
<circle class="default" id="08" cx="280" cy="280" r="40" />
<text x="273" y="288">8</text>
</g>
</svg>
<div>
<button type="button" onclick="select01()">House 1</button>
<button type="button" onclick="select02()">House 2</button>
<button type="button" onclick="select03()">House 3</button>
<button type="button" onclick="select04()">House 4</button>
<button type="button" onclick="select05()">House 5</button>
<button type="button" onclick="select06()">House 6</button>
<button type="button" onclick="select07()">House 7</button>
<button type="button" onclick="select08()">House 8</button>
</div>
<script>
function select01() {
const element = document.getElementById("01");
element.classList.toggle("selected")
}
function select02() {
const element = document.getElementById("02");
element.classList.toggle("selected")
}
function select03() {
const element = document.getElementById("03");
element.classList.toggle("selected")
}
function select04() {
const element = document.getElementById("04");
element.classList.toggle("selected")
}
function select05() {
const element = document.getElementById("05");
element.classList.toggle("selected")
}
function select06() {
const element = document.getElementById("06");
element.classList.toggle("selected")
}
function select07() {
const element = document.getElementById("07");
element.classList.toggle("selected")
}
function select08() {
const element = document.getElementById("08");
element.classList.toggle("selected")
}
</script>
</body>
</html>
