Question

我从以下网站下载了一个网站导览代码： http://tympanus.net/Development/WebsiteTour/

然后我想把它整合到我自己的网页上。但是有一个问题。问题是，该脚本使用jQuery 1.4.4。但是我的网页上还有一些其他元素，需要更新版本的jQuery。

旧脚本使用“live”函数，在较新版本的jQuery中不再支持。在做了一些研究后，我找到了这个页面 - http://api.jquery.com/live/，我根据那里的说明修改了代码。

问题只能部分解决。在它出现错误之前并没有做任何事情。用“on”替换“live”后，脚本现在可以正常工作了，但不是应该的。工具提示没有按原样显示，我尝试了各种各样的事情，但一切都不成功。

所以我非常感谢任何人的帮助。

这是原始版本，它使用旧的jQuery并正常工作： http://brzezina.cz/meteo/WebsiteTour/index.html

这是新版本的jQuery的新版本，然而它不能正常工作 - 尝试启动指南，你会看到问题 - 工具提示不会显示在他们的元素旁边，而是显示在页面顶部。 http://brzezina.cz/meteo/WebsiteTour/new.html

我在代码中所做的更改：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

替换为

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

然后

$('#activatetour').live('click',startTour);
$('#canceltour').live('click',endTour);
$('#endtour').live('click',endTour);
$('#restarttour').live('click',restartTour);
$('#nextstep').live('click',nextStep);
$('#prevstep').live('click',prevStep);

替换为

$(document).on('click','#activatetour',startTour);
$(document).on('click','#canceltour',endTour);
$(document).on('click','#endtour',endTour);
$(document).on('click','#restarttour',restartTour);
$(document).on('click','#nextstep',nextStep);
$(document).on('click','#prevstep',prevStep);

我没有做任何其他更改，新版本在控制台中没有显示任何错误，所以我真的不知道问题出在哪里。

Answer 1

这不是Javascript是问题，它是你的CSS。您需要添加固定在工具提示中的位置。此外，似乎工具提示位于叠加层下方，可以使用高于叠加层的z-indexing进行固定。如果将以下css添加到工具提示中，它们将更接近实际演示中的css

position: fixed,
z-index: 101,
padding: 20p,
border-radius: 3px

所以它看起来像这样：

var $tooltip = $('<div>',{
    id : 'tour_tooltip',
    'class' : 'tooltip', //changed className to 'class'
    html : '<p>'+step_config.text+'</p><span class="tooltip_arrow"></span>'
}).css({
    'display': 'none',
    'background-color' : bgcolor,
    'color' : color,
    'position': 'fixed',
    'z-index': 101,
    'padding': 20 + 'px',
    'border-radius': 3 + 'px'
});

jQuery代码冲突

1 个答案: