從JoyRide（jquery）更改基礎工具提示的位置

Question

我在頁面上制作了基金會的JoyRide（一堆工具提示出現在網站的不同位置）。

我想內容是動態創建的。 我嘗試通過一些像素值定位最后一個工具提示，但無法獲得任何結果（不起作用）。

所有生成的工具提示都具有類似的結構：

<div class="joyride-tip-guide" data-index="1" style="visibility: visible; display: block; top: 349px; left: 929.5px;">

這是我應對這一挑戰的方法：

$(document).ready(function(){
    $('body').on('div.joyride-tip-guide',function(){
        $(this).last().css("margin-top","150px"); 
    });
});

有任何想法嗎？

Answer 1

Joyride Javascript將覆蓋您設置的樣式屬性，因此它將不起作用。

一旦Joyride Javascript運行，您將需要將其重置。 查看文檔（foundation.zurb.com/docs/components/joyride.html），有一個函數post_step_callback

為此，您需要使用以下代碼來調用該函數：

var stepNumber = 3;//the step you want to position

$(document).foundation('joyride', {
  post_step_callback: function(step) {
      console.log('post_step_callback', step);
      if(step === stepNumber)
        //do your resetting of the position here
      }
  }
});
$(document).foundation('joyride', 'start');

該步驟是從0開始的Joyride步驟。

希望這可以幫助。