如何為基礎Orbit Slider調用onChange函數？

Question

我有一個基礎軌道滑塊。 我試圖在軌道圖像改變時調用一個函數。 在ready.fndtn.orbit下面的jquery中工作。 但是，滑后更換不會觸發。 Foundations文檔對此問題沒有幫助。非常歡迎您提出任何建議或幫助

<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控制台以查看輸出“幻燈片更改事件后獲取！”。