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'));
});

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

3 个答案: