猿问

使用javascript抓取文本并左对齐

我正在制作一个包含多行图像的网站，每个图像都应该是可点击的，并且左侧有标题。我在 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;

} 


HUX布斯
浏览 140回答 3
3回答

尚方宝剑之说

用于element.alt获取 alt 属性。var img = document.getElementById("img01");var captionText = document.getElementById("caption");function onClick(element) {&nbsp; document.getElementById("img01").src = element.src;&nbsp; document.getElementById("modal01").style.display = "block";&nbsp; captionText.innerHTML = element.alt;}&nbsp;
0

牛魔王的故事

我写了一些代码，你可以尝试一下。希望对您有帮助。<!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">&times;</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>
0

临摹微笑

如果您有兴趣显示与替代文本不完全匹配的数据，这是您可以考虑的另一种方法。如果文本始终与替代文本匹配，则另一个答案更接近您当前的尝试。  <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;}
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答