javascript - 使用图片alt内容作为灯箱图片描述内容，使用js更改html src

Question

我生成的html源码如下

<a href="/images/somePhoto.png" target="_blank">
   <img src="/img/somePhoto.png" alt="Image description text" width="286" height="171" />
</a>

我想在图像弹出窗口中显示图像替代内容作为图像描述（灯箱）。Bellow 是灯箱弹出窗口上生成的 html 的一部分

<div class="lb-details">
<span class="lb-caption" style="display: none;"></span>
<span class="lb-number" style="display: none;"></span>
</div>

如何将此行更改 <span class="lb-caption" style="display: none;"></span>为

<span class="lb-caption" style="display: inline;">ALT IMAGE CONTENT</span>

在 dom 上准备好使用 js。

Answer 1

在 DOM 准备就绪时，使用.css()更改其显示属性，使用.text()向其添加文本。

$(document).ready(function () {
    var lbcaption = $('.lb-caption');
    lbcaption.css('display', 'inline');
    lbcaption.text($('img').attr('alt')); 
    //Works for the code posted in the question, 
    //but the selector for the image needs to be a class or an id.
});