Question

我有一个引导程序轮播，我希望当滑块中的图像更改文本（跨度为class="image-title"）时，alt图像的值处于活动状态。

例如，如果image1处于活动状态，则范围将类似于<span>Alt of image 1</span>，当图像2处于活动状态时，跨度将为

<span>Alt of image 2</span>

我该怎么做？

演示http://jsfiddle.net/Q2TYv/1598/

Answer 1

您的图片不包含alt属性，因此您需要添加它们才能获取alt属性中的文字。
我创建了一个函数switchText。它采用活动图像的alt属性的文本，并将其设置为span元素中的文本：
```
function switchText() {
    $('span').text($('.active img').attr('alt'));   
}
```

当“滑动”事件发生时，你需要在回调函数的底部调用这个新函数：

// bind 'slid' function
$('#myCarousel').bind('slid', function() {

    // remove active class

    $('.carousel-linked-nav .active').removeClass('active');

    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();

    // select currently active item and add active class
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
    switchText();
});

调用slid事件时，这些更改会切换文本。但是在开始时你不会在span元素中有文本。要在开头获取文本，您必须在初始化轮播后直接调用switchText函数：
```
// invoke the carousel
$('#myCarousel').carousel({
     interval: 3000
});
// use alt text from first image at the beginning
switchText();
```

图像轮播切换时动态跨度文本更改

1 个答案: