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步骤。

希望这有帮助。

从JoyRide（jquery）改变基础工具提示的位置

1 个答案: