从<figcaption>标记覆盖/插入新的alt标记

时间:2015-07-13 11:35:29

标签: jquery html5

我有一个jQuery,见下文,它将我的图像包装在一个href标签中,以便它们可以在灯箱中使用。

我还需要调整alt标签中显示的内容,并且需要根据用户放入ckeditor(在每个图像下生成figcaption标签)的标题框中生成的内容生成。我需要能够将该数据插入空的alt =“”,并且如果alt标签中当前有任何内容,则能够覆盖。

目前正在输出的html是:

<figure class="image">
    <a data-imagelightbox="f" href="/ckfinder/userfiles/files/Screenshot_South-Downs-Lines-RSC_51_23330-1_22091_10-00-48.jpg">
        <img width="1600" height="900" src="/ckfinder/userfiles/files/Screenshot_South-Downs-Lines-RSC_51_23330-1_22091_10-00-48.jpg" alt="Caption 1"></img>
    </a>
    <figcaption>
        Caption
    </figcaption>
</figure>

我目前的脚本如下:

$('#article-copy img').each( function() {
    var $img = $(this),
        alt = $img.next('figcaption').text(),
        href = $img.attr('src');
    $img.wrap('<a href="' + href + '" data-imagelightbox="f"></a>');
});

感谢您的帮助

1 个答案:

答案 0 :(得分:1)

如果我理解正确,您想要更改图片的alt属性。然后这应该工作:

$('#article-copy img').each( function() {
    var $img = $(this),
        alt = $img.next('figcaption').text(),
        href = $img.attr('src');
    $img.attr('alt', alt );
    $img.wrap('<a href="' + href + '" data-imagelightbox="f"></a>');
});
相关问题