используя изображение содержания альта как содержание описания лайтбокса изображения, изменить HTML SRC с помощью JS

Question

Моего сгенерированного исходного HTML выглядит следующим образом

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

Я хочу, чтобы отобразить содержимое изображений альта в изображении во всплывающем окне в виде описания изображения (лайтбокс). Беллоу часть сгенерированного 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 ready, используйте .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. 
});