Question

我在我的网站上制作了一个稍微欺骗的jQuery循环，我需要将特定幻灯片中的data加载到位于实际滑块顶部的另一个div中，所以每次我点击下一个/ 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.currSlide]的事情。

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

jQuery循环访问数组并附加到div

1 个答案: