javascript - 获取触发事件的元素的 id
问题描述
我试图通过单击一个区域来创建一个模式,然后根据单击的区域以不同的方式对其进行修改。我遇到了一个停顿,因为我为所有区域提供了相同的 id,这意味着我的代码只会使用第一个区域的数据修改模式。有没有办法,在给每个区域一个唯一的 id 之后,把它放在函数中?
$("#ModArea").click(function() {
var name = $(this).attr('title');
$("#country_name").html(name);
});
/* The Modal (background) */
.modal fade {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 2px 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="europe_img" src="https://mapswire.com/download/europe/europe-political-map-miller.jpg" usemap="#europe" alt="Europe">
<map name="europe">
<area id="ModArea" target="" alt="Iceland" title="Iceland" coords="138,388,35,540,232,748,549,585,516,374"
shape="poly" data-toggle="modal" data-target="#Modal">
<area id="ModArea" target="" alt="Ireland" title="Ireland" coords="791,1240,644,1337,635,1568,846,1496,866,1304"
shape="poly" data-toggle="modal" data-target="#Modal">
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="country_name"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
</map>
现在,如果我点击爱尔兰,它会创建一个标题为空的模式,而如果我点击冰岛,或者在点击冰岛后点击爱尔兰,它会创建一个以“冰岛”作为图块的模式。
解决方案
推荐阅读
- c++ - 连接 C++ 程序以从 MySQL 中提取表
- c++ - 结构未声明的标识符
- python - 在带有 Python 的 VS Code 中,如何将类方法中的第一个参数(self)设为斜体?
- r - dopar中代码的流程优化
- spring-boot - 如何在spring webflux中的webClient实例化期间设置一次访问令牌?
- python - __init__() 调用类时缺少位置参数
- html - html下拉列表加载第一个值
- python - 模型未在 Django 模板中呈现
- python - [Django]提交表单后如何在不刷新页面的情况下显示消息(正确或错误)?
- amazon-web-services - 如何使用 proxy+ 处理 api 网关上的根资源以返回正文?