javascript - 在另一个 HTML 元素中将标题属性显示为字符串

Question

整天都在尝试一切以使这个工作没有运气。

我想将元素中的 title 属性li用作完全独立元素内的字符串span。

这是我的代码：

<script type="text/javascript">
    $(document).ready(function(){

    });
</script>
<div id="slider">
  <ul>
    <li class="slide" title="Careers">
        <img src="large-image-1.jpg" alt="Large Image 1" /> </li>
  </ul>
</div>
<div id="slide-thumbs">
  <ul>
    <li><img src="thumb-image-1.jpg" alt="Thumbnail for Large Image 1" />
        <span class="thumb-caption"><!-- need title attribute above reading "Careers" to go here --></span>
  </ul>
</div>

我觉得我在这里错过了一些简单的东西。我只能使用 Javascript 来处理我正在使用的脚本。PHP 不是一个选项。任何帮助将不胜感激。

谢谢你，贾斯汀。

Answer 1

var title = $('.slide').attr('title');
$('span').html(title);

Answer 2

JS 应该可以正常工作，但需要考虑的是您可以使用纯 CSS 来执行此操作并避免额外的标记。只需使用伪元素显示标题属性并将其放置在您喜欢的位置：

.slide:before {
    content: attr(title);
    position: absolute;
    display: block;
}

由于标题已经显示在页面上，并且除此之外您没有生成任何其他内容，因此没有理由使用额外的元素

Answer 3

如果有不止一张幻灯片，最好使用：

$('.thumb-caption').each(function(i) {
    $(this).html($('.slide').eq(i).attr('title'));
});