我正在制作一个包含多行图像的网站，每个图像都应该是可点击的，并且左侧有标题。我在 HTML 中使用了内联 javascript（我知道这被轻视）和 onclick 事件。我有一个带有一些基本 JavaScript 的 js 文件。我正在使用 js 文件将图像中的 alt 标签添加到照片的左侧。我是初学者，从codepen和w3schools复制到代码。当我单击图像时，模式可以工作，但文本显示为“未定义”。我需要弄清楚如何使用 javascript 在单击图像时显示 alt 标签文本。这适用于每张图像，而不仅仅是一张图像，因此 JavaScript 必须适用于每张照片。谢谢你！带有未定义文本的模态图像<!-- IMG ROW 1 --><div> <div class="nested"> <div> <img src="IMAGES/c1.jpg" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100"> </div> <div> <img src="IMAGES/IMG_c2.jpg" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100"> </div> <div> <img src="IMAGES/IMG_c3.JPG" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100"> </div> <div> <img src="IMAGES/IMG_c4.JPG" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100"> </div> <div> <img src="IMAGES/IMG_c5.JPG" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100"> </div> <div> <img src="IMAGES/IMG_c6.JPG" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100"> </div> <div> <img src="IMAGES/IMG_c7.JPG" onclick="onClick(this)" class="modal-hover-opacity" alt="Smiley face" height="100"> </div> </div></div>.modal-content { margin: auto; display: block; width: 80%; max-width: 700px; transform: rotate(90deg); height: 100%; vertical-align: middle;}/* Caption of Modal Image */#caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px;}var img = document.getElementById("img01");var captionText = document.getElementById("caption");function onClick(element) { document.getElementById("img01").src = element.src; document.getElementById("modal01").style.display = "block"; captionText.innerHTML = this.alt;}
3 回答
尚方宝剑之说
TA贡献1788条经验 获得超4个赞
用于element.alt获取 alt 属性。
var img = document.getElementById("img01");
var captionText = document.getElementById("caption");
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
captionText.innerHTML = element.alt;
}
牛魔王的故事
TA贡献1830条经验 获得超3个赞
我写了一些代码，你可以尝试一下。
希望对您有帮助。
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<img id="myImg" onclick="modalImg('img1','cap1')" data-toggle="modal" data-target="#myModal" src="https://mymodernmet.com/wp/wp-content/uploads/2019/03/elements-of-art-6.jpg" alt="Painting Is Wonderfull" style="width:20%">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table width="100%">
<tr>
<td width="30%">
<p id="cap1" style="transform: rotate(90deg);"></p>
</td>
<td>
<img id="img1" width="100%">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function modalImg(img, cap) {
var caption = document.getElementById("myImg").alt;
var src = document.getElementById("myImg").src;
var imgModal = document.getElementById(img).src = src;
var capModal = document.getElementById(cap).innerHTML = caption;
}
</script>
</html>
临摹微笑
TA贡献1982条经验 获得超2个赞
如果您有兴趣显示与替代文本不完全匹配的数据，这是您可以考虑的另一种方法。如果文本始终与替代文本匹配，则另一个答案更接近您当前的尝试。
<div>
<img src="IMAGES/c1.jpg" onclick="showAlt(this)" class="modal-hover-opacity" alt="Smiley face" height="100" data-alt-text="Smiley face">
</div>
function showAlt(pic) {
var picText = pic.getAttribute("data-alt-text");
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
captionText.innerHTML = picText;
}
- 3 回答
- 0 关注
- 139 浏览
添加回答
举报
0/150
提交
取消