Question

我有一个基础轨道滑块。我想在轨道图像改变时调用一个函数。在ready.fndtn.orbit下面的jquery中工作。然而，幻灯片后更改不会触发。基金会文档对此问题没有任何帮助。非常欢迎任何建议或帮助

<ul id="featured1" class="no-bullet example-orbit" data-orbit data-options="animation:fade;
    timer: false;
    slide_number: false;
      pause_on_hover:false;
      animation_speed:800;
      navigation_arrows:true;
      bullets:false;">

    <li id="slideImg1">
        <a href="training/hygiene.cfm"><img src="img/slide5.png" alt="stuff here"></a>
    </li>

    <li id="slideImg2">
        <a href=""><img src="img/slide6.png" alt="See a Demo of the CIS-CAT Assesment Tool" ></a>
    </li>
    <li id="slideImg3">
        <a href=""><img src="img/slide7.png" alt="The Critical SecurityControls are now available in Japanese"></a>
    </li>
</ul>


<script>
    $(document).on('ready.fndtn.orbit', function(e) {
            captionFunction();
        });
        $(document).on('after-slide-change.fndtn.orbit', function(e) {
            captionFunction();
        });
</script>

Answer 1

根据我在Foundation文档中看到的内容，您似乎希望选择ul元素来添加事件处理程序，在您的情况下：$("#featured1").on("after-slide-change.fndtn.orbit")....而不是选择$(document) }。我试了一下快速样本，事件就好了。

请参阅http://foundation.zurb.com/docs/components/orbit.html并搜索“after-slide-change.fndtn.orbit”以查看我正在查看的示例。

更新

我已经设置了一个jsFiddle来演示这个工作（你必须滚动到javascript面板的底部才能看到相关内容）。似乎关键是用$(document).ready(function(){和});围绕javascript：

$(document).ready(function() {
    // this should come before initializing orbit or it won't fire
    $("#featured1").on('ready.fndtn.orbit', function(e) {
        console.log('orbit is ready');
    });

    $(document).foundation({
       orbit: {
            animation: 'fade',
            timer: false,
            slide_number: false,
            pause_on_hover: false,
            animation_speed: 800,
            navigation_arrows: true,
            bullets: false
        }
    });

    $("#featured1").on('after-slide-change.fndtn.orbit', function(e) {
        console.log('getting after slide change event!');
    });
});

请注意，我必须将调用添加到$(document).foundation，我必须将计时器设置为true，因为我无法看到导航箭头以手动更改幻灯片。最后，我没有你的图像，所以它非常丑陋，但我认为它演示了如何让事情运作得很好;）

无论如何，当您访问该链接时，请打开浏览器的javascript控制台以查看输出“获取幻灯片更改事件后！”。

如何为基础轨道滑块调用onChange函数？

1 个答案:

更新