無法使用https://codepen.io/dudleystorey/pen/vNoeyW關閉代碼框
var canadamap = document.getElementById("canada-map"),
provinceInfo = document.getElementById("provinceInfo"),
allProvinces = canadamap.querySelectorAll("g");
canadamap.addEventListener("click", function(e){
var province = e.target.parentNode;
if(e.target.nodeName == "path") {
for (var i=0; i < allProvinces.length; i ) {
allProvinces[i].classList.remove("active");
}
province.classList.add("active");
var provinceName = province.querySelector("title").innerHTML,
provincePara = province.querySelector("desc p");
sourceImg = province.querySelector("img"),
imgPath = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/";
provinceInfo.innerHTML = "";
provinceInfo.insertAdjacentHTML("afterbegin", "<img src=" imgPath sourceImg.getAttribute('xlink:href') " alt='" sourceImg.getAttribute('alt') "'><h1>" provinceName "</h1><p>" provincePara.innerHTML "</p>");
provinceInfo.classList.add("show");
}
})
uj5u.com熱心網友回復：
您可以將其他設定為您的代碼，以在地圖外單擊時隱藏資訊
var canadamap = document.getElementById("canada-map"),
provinceInfo = document.getElementById("provinceInfo"),
allProvinces = canadamap.querySelectorAll("g");
canadamap.addEventListener("click", function(e){
var province = e.target.parentNode;
for (var i=0; i < allProvinces.length; i ) {
allProvinces[i].classList.remove("active");
}
if(e.target.nodeName == "path") {
province.classList.add("active");
var provinceName = province.querySelector("title").innerHTML,
provincePara = province.querySelector("desc p");
sourceImg = province.querySelector("img"),
imgPath = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/";
provinceInfo.innerHTML = "";
provinceInfo.insertAdjacentHTML("afterbegin", "<img src=" imgPath sourceImg.getAttribute('xlink:href') " alt='" sourceImg.getAttribute('alt') "'><h1>" provinceName "</h1><p>" provincePara.innerHTML "</p>");
provinceInfo.classList.add("show");
} else {
provinceInfo.classList.remove("show");
provinceInfo.innerHTML = "";
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/409774.html
標籤：