-1

我有一个 div (.bx-caption)，其中文本根据滑块中所选图像的标题属性而变化。

我正在尝试将文本从这个 div 复制到另一个 div，并始终让它们匹配。

我在用着：

$(document).ready(function(){
    $('.screenTitle').html($(".bx-caption").html());
});

此代码可在网站加载时匹配文本，但每当我更改滑块中的图像并且 .bx-caption 切换到新标题时，.screenTitle 不会选择它并保持不变。

如何确保 .screenTitle 始终与 .bx-caption 匹配？

提前感谢任何提供帮助的人。

更新：HTML 看起来像这样：

        <ul class="bxslider">
        <li><img src="images/1.png" title="Funky Roots" /></li>
        <li><img src="images/2.png" title="Little Toots" /></li>
        <li><img src="images/3.png" title="Epic Loots" /></li>
    </ul>       
</div>
<div class="outside">
    <div class="screenTitle"></div>
    <div id="slider-prev"></div> <div id="slider-next"></div>
</div>

这是一个试图尝试上述操作的 JSFiddle： jsfiddle.net/uwA3Q/2/

4

2 回答 2

1

Document.ready 仅在您加载页面时触发一次。

曾经更改滑块的人将您的代码放在那里

$('.screenTitle').html($(".bx-caption").html());

例如，如果您有一个更改幻灯片的单击处理程序

$('#mySlide').on('click', function(){
   //do the changing of the slide
   //also update the title here
   $('.screenTitle').html($(".bx-caption").html());
})
于 2013-11-10T21:41:58.963 回答
0

如果您使用bxslider添加onSlideAfter回调来更改屏幕标题：

$('.bxslider').bxSlider({
    // ......
    onSlideAfter: function($slideElement) {
        // get .bx-caption element of current slide
        $('.screenTitle').html($slideElement.find('.bx-caption').html());
    }
});

http://jsfiddle.net/DQadF/2/

于 2013-11-10T21:53:18.427 回答