jquery - jQuery循环访问数组中的数据并附加到div

Question

我在我的网站上设计了一个稍微复杂的 jQuery 循环，我需要data将特定幻灯片中的 jQuery 循环加载到位于实际滑块顶部的不同 div 中，所以每次我点击 next/prev 时，它都会加载正确的数据- 我的问题是在回调中如何设置索引以使其与数组中的正确数据相对应？我想真正的问题是关于访问数组中的数据，而不是循环。

    var array = [ 
        {
            url: 'slide01.jpg',
            data : 'Eat, <br /> Drink, <br /> Escape!'
        },    
        {
            url: 'slide02.jpg',
            data : 'Eat, <br /> Drink, <br /> Escape!2'
        },  
        {
            url: 'slide03.jpg',
            data : 'Eat, <br /> Drink, <br /> Escape!3'
        },  
        {
            url: 'slide04.jpg',
            data : 'Eat, <br /> Drink, <br /> Escape!4'
        },  
        {
            url: 'slide05.jpg',
            data : 'Eat, <br /> Drink, <br /> Escape!5'
        }                        
    ];

    var path = 'img/';

        $.each(array, function(i) {
            $('#slider').append('<li data-id="' + i + '"><img src=' + path + array[i].url + '></li>');
        });

        $('#slider').cycle({
        fx: "scrollHorz",
        next: "#next",
        prev: "#prev",
        speed: 1000,
        timeout: 5000,
        before: onBefore(),
        after: onAfter(),
        cssBefore: {
            opacity: 0
        },
        animIn: {
            opacity: 1
        },
        animOut: {
            opacity: 0
        },
        cssAfter: {
            opacity: 1
        },
        delay: 3000
        });
        function onBefore() { 
        $('#content').html("Scrolling image:<br>" + this.src); 
        } 
        function onAfter() { 
        $('#content').empty().append('<h1>' + array[i].data + '</h1>'); 
        }       

Answer 1

after 事件具有以下参数http://jquery.malsup.com/cycle/options.html：

function(currSlideElement, nextSlideElement, options, forwardFlag)

因此，您可以在该事件中执行类似 array[options.currSlide] 的操作。

 function onAfter(currSlideElement, nextSlideElement, options, forwardFlag) { 
      $('#content').empty().append('<h1>' + array[options.currSlide].data + '</h1>'); 
    }