Question

我生成的html源代码如下

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

我想在图像弹出窗口中显示图像alt内容作为图像描述（灯箱）。 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.
});

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

1 个答案: