在 jQuery Slider 中的每个“幻灯片”旁边添加文本值

Question

我目前有一个 jQuery Slider 正在进行中：http://jsfiddle.net/hQj8a/

    $(document).ready(function() {

        $('body').removeClass('no-js');

        $('#my-carousel-2').carousel({

            itemsPerPage: 3,

            itemsPerTransition: 3,

            speed: 500,

            nextPrevLinks: false

        });

    });

当用户在分页 (1,2,3) 之间单击时，我希望在分页旁边显示不同的文本。 所以最初在页面加载时（即状态 1）它应该说“你好”并点击 2，它应该说“再次问好”和 3它说“再见”。

有人可以告诉我如何使用我当前的代码实现这一点吗？它不必“动画化”，只需根据当前分页值在三位文本之间切换即可。

非常感谢您对此的任何指点 :-)

Answer 1

http://jsfiddle.net/hQj8a/5/

在 jQuery 中，我添加了一个跨度来保存文本“Hello”、“Hello again”或“Goodbye”。我给那个跨度一个“addText”的ID。然后我为分页链接添加了一个事件监听器（使用 chrome 中的检查元素找到了选择器），它查看点击链接的文本以确定您点击了哪个链接。在此基础上，适当地填充 addedText。

添加了 jQuery/javascript：

$('.pagination-links').append("<span id='addedText'>Hello</span>");
var addedText = document.getElementById('addedText');

$('.pagination-links a').click(function(){
    if (this.innerHTML == '1')
        addedText.innerHTML = "Hello";
    else if (this.innerHTML == '3')
        addedText.innerHTML = "Goodbye";
    else
        addedText.innerHTML = "Hello again";
});

添加了 CSS：

#addedText {
    float: left;
    padding-top: 12px; //copied from .carousel .pagination-links li a
}

编辑：默认为 addedText 添加了“Hello”，因此它会在页面加载时显示。