Question

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

我正在尝试将此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/

Answer 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());
})

Answer 2

如果您使用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/

不断将div的内容更新为另一个div

2 个答案: