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

Question

一整天都在尝试所有操作，以使它没有运气。

我想将li元素中的title属性用作完全独立的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来做到这一点，并避免额外的标记。 只需使用伪元素显示title属性并将其放在您喜欢的位置即可：

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

由于标题已经显示在页面上，并且除了标题之外您没有生成其他任何东西，因此没有必要添加额外的元素

Answer 3

如果有一张以上的幻灯片，请更好地使用：

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