Javascript 尝试将数组分配给对象并将其分配给div
我对编程很陌生。也许我想的不对。。。 情况如下： 我有一张SVG加拿大地图（有12个省，每个省都有一个ID）。 我想给每个省一个最低年龄，点击每个省，我想在控制台中输出年龄 以下是我到目前为止的情况：Javascript 尝试将数组分配给对象并将其分配给div,javascript,jquery,arrays,Javascript,Jquery,Arrays,我对编程很陌生。也许我想的不对。。。 情况如下： 我有一张SVG加拿大地图（有12个省，每个省都有一个ID）。 我想给每个省一个最低年龄，点击每个省，我想在控制台中输出年龄 以下是我到目前为止的情况： let province = { manitoba:{ age:"19", selector: $('#manitoba') }, yukon:{ age:"19",
let province = {
manitoba:{
age:"19",
selector: $('#manitoba')
},
yukon:{
age:"19",
selector: $("#yukon")
},
alberta:{
age:"18",
selector: $("#alberta")
},
saskatchewan:{
age:"9",
selector: $("#saskatchewan")
},
ipe:{
age:"19",
selector: $("#ipe")
},
nb:{
age:"19",
selector: $("#nb")
},
ontario:{
age:"19",
selector: $("#ontario")
},
quebec:{
age:"21",
selector: $("#quebec")
},
novaScotia:{
age:"19",
selector: $("#novaScotia")
},
bc:{
age:"19",
selector: $("#bc")
},
northwest:{
age:"19",
selector: $("#northwest")
},
newfoundland:{
age:"19",
selector: $("#newfoundland")
},
nunavut:{
age:"19",
selector: $("#nunavut")
}
}
$("#manitoba").click(function(event) {
console.log($(this).age);
});
文件
Qc
打开
卑诗省
.st0{fill:#3C806F；}
.st1{fill:#6CB494；}
.st2{fill:#29614F；}
.st3{显示：无；}
.st4{显示：内联；}
.st5{fill:#FFFFFF；}
.st6{fill:#FBC733；}
.st7{fill:#F29451；}
.st8{fill:#ED717D；}
.st9{fill:#EA5845；}
点击我
//带ES5的jQuery版本
$（'.province'）。在（'click'，函数（e）{
console.log（$（e.currentTarget）.data（'age'））
})
//香草JS与ES6
document.querySelectorAll（'.province'）.forEach（el=>{
el.addEventListener（'click'，e=>{
console.info（e.currentTarget.dataset.age）
})
})
马尼托巴省
阿尔伯塔省未定义DOM中不存在密钥年龄
我想你要找的是：
$（“#马尼托巴”）。单击（功能（事件）{
log（$（this.attr（“id”））；
});
更新的解决方案
新守则将是：
let省={
马尼托巴省：{
年龄:"19岁",，
选择器：$（“#马尼托巴省”）
},
育空：{
年龄:"19岁",，
选择器：$（“#育空”）
},
阿尔伯塔省：{
年龄:"18岁",，
选择器：$（“#阿尔伯塔省”）
},
萨斯喀彻温省：{
年龄:"9岁",，
选择器：$（“#萨斯喀彻温省”）
},
ipe：{
年龄:"19岁",，
选择器：$（“#ipe”）
},
注意：{
年龄:"19岁",，
选择器：$（“#nb”）
},
安大略省：{
年龄:"19岁",，
选择器：$（“#安大略省”）
},
魁北克：{
年龄:"21岁",，
选择器：$（“#魁北克”）
},
新斯科舍省：{
年龄:"19岁",，
选择器：$（“#新斯科舍省”）
},
卑诗省：{
年龄:"19岁",，
选择器：$（“#bc”）
},
西北部：{
年龄:"19岁",，
选择器：$（“#西北”）
},
纽芬兰：{
年龄:"19岁",，
选择器：$（“#纽芬兰”）
},
努纳武特：{
年龄:"19岁",，
选择器：$（“#nunavut”）
}
}
$（“#层_1”）。在（“单击”，“多边形”，函数（事件）{
console.log（省[$（this.attr（“id”）].age）；
});
毕竟，您需要检查对象中是否存在密钥以避免错误
工作示例：您可以使用：$（“#马尼托巴”）。单击（函数（事件）{console.log（$（this.attr（“id”）；}）。你能分享html吗？谢谢，这是我的下一步！好的，我明白了。但是，我需要输出我在每个省定义的年龄。。。我基本上想创建一个对象，它有12个省，每个省都有其“年龄”定义。我希望能够与DOM进行交互。。。因为我不想在控制台上记录ID，但要记录给定省份的年龄。。。我将尝试使用数据属性，但有没有一种方法可以对对象执行此操作？@JoMourad你能用你现在拥有的HTML
更新你的问题吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-css.css">
</head>
<body>
<div class="container">
<!-- <ul>
<li id="qcElem">quebec</li>
<li id="onAge">ontario</li>
<li id="bcAge">BC</li>
</ul> -->
<li value="18">Qc</li>
<li value="19">On</li>
<li value="21">Bc</li>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1200 800" style="enable-background:new 0 0 1200 800;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3C806F;}
.st1{fill:#6CB494;}
.st2{fill:#29614F;}
.st3{display:none;}
.st4{display:inline;}
.st5{fill:#FFFFFF;}
.st6{fill:#FBC733;}
.st7{fill:#F29451;}
.st8{fill:#ED717D;}
.st9{fill:#EA5845;}
</style>
<polygon value="19" id="manitoba" class="st0" points="545.45,593.05 558.91,577.26 568.96,563.06 605.47,507.95 596.12,506.69
586.88,503.14 577.36,505.64 572.59,508 569.03,510.11 567.6,509.27 564.63,511.59 567.35,502.38 562.82,492.28 558.28,481.5
555.98,476.64 553.85,477.05 550.88,476.77 546.8,479.94 546.09,486.39 545.98,479.08 544.3,477.56 542.77,475.64 541.31,475.06
538.55,471.95 538.98,453.86 483.95,455.65 468.27,455.4 465.89,538.34 470.3,670.07 489.74,670.22 523.66,669.56 549.17,668.29
549.9,667.17 549.57,660.86 545.33,596.27 "/>
<polygon value="19" id="yukon" class="st0" points="211.02,399.68 261.31,419.06 259.94,417.53 260.51,416.49 260.39,414.67 260.31,411.5
260.79,409.77 259.95,408.62 259.26,405.76 260.16,403.19 259.27,398.71 257.51,400.16 255.54,399.72 253.69,400.12 249.11,396.57
247.38,397.17 247.02,396.14 245.96,396.92 243.75,396.35 240.83,395.78 241.75,390.4 240.72,389.29 241.58,388.72 242.39,387.26
242.86,381.47 240.17,379.68 239.02,377.24 238.62,373.82 237.77,371.06 236.01,365.77 234.7,366.18 234.38,365.32 232.21,363.77
233.31,359.67 233.92,357.96 235.11,357.44 234.48,355.98 233.86,351.08 234.47,348.63 236.67,346.14 235.34,344.64 235.53,342.92
235,341.13 234.8,340.22 236.47,339.63 238.83,337.32 238.32,334.74 238.38,333.8 237.52,333.32 237.82,332.25 238.73,331.08
236.35,325.44 236.93,320.57 235.58,316.34 232.47,316.19 233.72,314.47 233.38,312.42 232.97,309.46 232.09,307.83 230.78,306.83
231.47,305.38 233.12,303.72 234.47,303.08 234.25,301.99 233.95,301.11 234.3,299.87 233.1,298.98 235.5,297.97 238.49,296.22
241.25,290.8 241.11,288.49 243.47,287.03 242.45,286.08 241.69,285.74 238.85,286.41 240.02,284.77 237.67,284.01 234.95,283.26
235.89,280.9 237.88,279 237.28,277.29 239.67,274.87 241.18,270.26 242.29,267.82 242.4,264.8 233.07,259.83 229.34,257.19
232.11,253.76 233.99,250.35 235.07,248.26 234.89,246.12 237.97,241.13 247.87,226.65 246.26,225.86 245.02,223.86 242.94,220.69
240.22,212.97 239.83,208.53 237.75,205.1 234.63,202.76 231.88,199.88 186.76,257.73 142.97,317.27 124.47,343.52 124.37,347.15
127.18,348.1 128.81,351.11 131.35,351.82 134.78,352.2 137.89,353.91 135.55,356.5 134.4,359.62 161.09,375.21 "/>
</svg>
</div>
<form onSubmit="toutCa(); return false;">
<input type="text" id="inputtedAge">
<input type="submit">
</form>
<div id="slider"></div>
<p>click me</p>
</body>
<script src="script.js"></script>
<script>
</script>
</html>