我正在制作一個包含多行圖像的網站，每個圖像都應該是可點擊的，并且左側有標題。我在 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" >
? ? <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 關注
- 182 瀏覽
添加回答
舉報
0/150
提交
取消