通过另一个元素上的onClick暂停SuperSized.js

Question

我真的不“理解”jQuery --我只使用JS来修改客户端的DOM属性--但是当一个工具符合要求时，你就必须使用它。我的页面上运行着一个SuperSized幻灯片，我还在底部的导航栏中添加了几个按钮。当单击这些按钮时，我会打开一个窗口，显示有关当前幻灯片的更多信息，但因为它是“当前”幻灯片，所以我需要在窗口打开时停止放映。一切都很正常，除了这个停止的业务。我提到了api，有一个调用就是这样做的：

$(element).click(function(){
    api.playToggle();
});

...but如何在另一个元素的onClick中调用它？我知道上面的代码向'element‘添加了一个单击事件处理程序，我只是不知道我自己是如何从普通的旧onClick=中调用这个函数的。

任何帮助都非常感谢

丹尼

Answer 1

您需要将单击事件附加到元素。

http://api.jquery.com/click/

我假设你的“按钮”是一个链接。

HTML：

<div id="btnContainer">
    <a id="slideInfo" href="#">More Info</a>
</div>

jQuery：

$(function($) {
    $('#slideInfo').click(function() {
        api.playToggle();
    });
});

这就是它正在做的事情。首先，jQuery需要在页面加载完成后运行。这可以通过以下方式完成：

$(function($) {
    //Do this when page/DOM is done loading
});  

我们使用jQuery Selectors来选择id为slideInfo的元素。我们将click事件处理程序附加到元素。在click处理程序中，我们定义在元素被单击后要执行的代码。在这种情况下，我们想要切换幻灯片的播放。调用超大插件的api.PlayToggle()；函数就可以做到这一点。

要记住的一件事是，这将暂停幻灯片放映，以便您可以显示更多信息窗口。我不知道您是如何显示此窗口的，但我建议使用对话框弹出窗口。一旦用户关闭此对话框弹出窗口，您就需要以某种方式再次调用api.playToggle()函数来启动幻灯片回放。如果你需要更多的帮助，只需要回复更多的信息。

我不太确定你的第二个问题是什么。我认为您想要一个在单击触发api.playToggle()函数的按钮时被调用的函数，但是您还希望在其他javascript/jquery代码中的其他地方调用此函数，或者将其附加到另一个元素。在这种情况下，您可以考虑将jquery更改为：

<script type="text/css">
    function ToggleSlideshow() {
        api.playToggle();
    }

    $(function($) {
        $('#slideInfo').click(function() {
            ToggleSlideshow();
        });
    });
</script>

我只是简单地创建了一个名为ToggleSlideshow()的函数，它将触发api.playToggle()函数。然后，当我附加单击处理函数时，我告诉它触发ToggleSlideshow()函数。如果你想把它附加到一个按钮或类似的东西的onClick属性上，你需要做的就是：

onClick="javascript:ToggleSlideShow()"

我希望我已经准确地回答了你的问题。

Answer 2

我正在使用您建议的代码：

<script type="text/javascript">


$(function($) {
    $('#slideInfo').click(function() {
        api.playToggle();
    });
});

</script>


<div id="btnContainer">
    <a id="slideInfo" href="#">More Info</a>
</div>

若要使用模式框暂停幻灯片放映，请执行以下操作。它工作得很完美！

但是，当我关闭模式框时，我无法重新启动幻灯片。

我是不是遗漏了一些额外的代码？(你写了上一个用户，问你是不是这样)。

非常感谢！