Question

我有一个页面，其中包含一个炒作文档，这是一系列作为场景播放的动画。在最终场景中，生成绿色勾号，允许用户移动到下一章节。我希望绿色勾选显示由javascript文件tooltip.js指定的工具提示。此文件加载页面，因为它在炒作元素之外的页面中的其他元素上使用。

问题在于，在生成绿色勾号之前，如果tooltip.js已加载页面，则它不会将自身应用于绿色勾号。我可以通过以下方式解决这个问题：

if (scenenumber3 == finalSceneNumber) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "/scripts/tooltip.js"
    head.appendChild(script);
}

其中scenenumber3是当前场景编号，因此在生成绿色勾号的最终场景中，将添加并加载tooltip.js。这有效，但意味着每次运行场景时都会加载tooltip.js文件。它还意味着此文件与最初加载的文件冲突，导致一些问题。 tooltip.js文件如下：

$(function ()
{
    var targets = $( '[data-rel~=tooltip]' ),
        target  = false,
        tooltip = false,
        title   = false;

targets.bind('mouseenter', function ()
{
    target  = $( this );
    tip     = target.attr( 'title' );
    tooltip = $( '<div id="tooltip"></div>' );

    if( !tip || tip == '' )
        return false;

    target.removeAttr( 'title' );
    tooltip.css( 'opacity', 0 )
           .html( tip )
           .appendTo( 'body' );

    var init_tooltip = function ()
    {
        if( $( window ).width() < tooltip.outerWidth() * 1.5 )
            tooltip.css( 'max-width', $( window ).width() / 2 );
        else
            tooltip.css( 'max-width', 340 );

        var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
            pos_top  = target.offset().top - tooltip.outerHeight() - 8;

        if( pos_left < 0 )
        {
            pos_left = target.offset().left + target.outerWidth() / 2 - 8;
            tooltip.addClass( 'left' );
        }
        else
            tooltip.removeClass( 'left' );

        if( pos_left + tooltip.outerWidth() > $( window ).width() )
        {
            pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
            tooltip.addClass( 'right' );
        }
        else
            tooltip.removeClass( 'right' );

        if( pos_top < 0 )
        {
            var pos_top  = target.offset().top + target.outerHeight();
            tooltip.addClass( 'top' );
        }
        else
            tooltip.removeClass( 'top' );

        tooltip.css( { left: pos_left, top: pos_top } )
               .animate( { top: '+=0', opacity: 1 }, 250 );
    };

    init_tooltip();
    $( window ).resize( init_tooltip );

    var remove_tooltip = function ()
    {
        tooltip.animate({ top: '-=0', opacity: 0 }, 250, function ()
        {
            $( this ).remove();
        });

        target.attr( 'title', tip );
    };

    target.bind( 'mouseleave', remove_tooltip );
    tooltip.bind( 'click', remove_tooltip );
});

我想知道的是处理这个问题的最佳方法是什么？我可以重新运行已加载的tooltip.js文件，因此它仅适用于绿色勾号吗？我对javascript没有任何体验，所以我很高兴听到那些知道javascript的人会做些什么来处理这种情况？

如何生成div后，如何刷新已加载的javascript文件？

0 个答案: