以编程方式重复 jQuery 工具覆盖答案

【问题标题】：Programmatically repeating a jQuery Tools Overlay以编程方式重复 jQuery 工具覆盖
【发布时间】：2011-10-21 03:23:56
【问题描述】：

我还有一个关于 jQuery 工具的新手问题 (http://flowplayer.org/tools/overlay/index.html)。单击图像时会触发叠加层，其代码在 html 正文中看起来相对像这样。

<img id = "shark" src = "http://static.guim.co.uk/sys-images/Education/Pix/picture
s/2000/11/13/shark.jpg" alt = "click" />

<div id = "overlayFrame">
    <div id = "overlayContent"></div>
</div>

<script type= "text/javascript">
    var clickable = document.getElementById('shark');
    clickable.onmousedown = ImageClick;
    
    function ImageClick(e)
    {
        console.log("image clicked");
        $("#overlayFrame").overlay
        ({
            mask: 'darkgrey',
            oneInstance: false,
            
            onBeforeLoad: function()
            {
                var wrap = this.getOverlay().find("#overlayContent");
                wrap.load("overlay.htm");
            },
            
            load: true
        });
    }
</script>

我希望每次单击图像时都会出现叠加层。现在，每次单击图像时，“单击图像”都会打印到控制台，但覆盖仅在第一次发生。如何更改此代码以使覆盖每次都发生？

【问题讨论】：

overlay() 函数来自哪个插件？
抱歉没有发这个，这里是链接flowplayer.org/tools/demos/overlay/trigger.html
我认为在 onBeforeLoad 中应该是 $(this)，因为通常 jQuery 事件中的 this 是一个 dom 元素，但我现在没有时间测试你的代码。如果是这样，它会破坏你的 js
$(this) 应该在 onBeforeLoad 中的什么位置？
啊，这就是你的意思，我现在觉得很傻。但是，是的，从 'this' 更改为 '$(this)' 完全破坏了它。

标签： jquery jquery-events jquery-tools jquery-click-event

【解决方案1】：

我没有测试你的具体代码，但我解决了同样的问题，即通过每次调用 overlay().load() 以编程方式重复加载。我认为这对你有用。请参阅下面的最后一行：

<script type= "text/javascript">
var clickable = document.getElementById('shark');
clickable.onmousedown = ImageClick;

function ImageClick(e)
{
    console.log("image clicked");
    $("#overlayFrame").overlay
    ({
        mask: 'darkgrey',
        oneInstance: false,

        onBeforeLoad: function()
        {
            var wrap = this.getOverlay().find("#overlayContent");
            wrap.load("overlay.htm");
        },

        load: true
    }).load(); // This is the only code I added
}
</script>

【讨论】：