0

我在删除同一函数中由 jQuery 创建的元素时遇到了一些问题。这是正在发生的事情：

我创建了一个 jQuery 函数 (toggleClick)，它打开一个侧面板，然后创建一个覆盖元素，该元素应用于页面的其余部分（不包括面板）。应该发生的事情是在用户单击叠加层后，它将关闭面板并摆脱叠加层元素。我在这里做错了吗？

jQuery代码：

jQuery(document).ready(function(){
    /* DEFINE TOGGLECLICK */
    $.fn.toggleClick=function(){
        var functions=arguments
        return this.click(function(){
            var iteration=$(this).data('iteration')||0
            functions[iteration].apply(this,arguments)
            iteration= (iteration+1) %functions.length
            jQuery(this).data('iteration',iteration)
        })
    }
    /* DEFINE APANEL ID */
    var aPanel = "#aPanel";
    /* DEFINE APANEL FUNCTIONALITY */
    jQuery('#apanel-fire,#aPanelOverlay').toggleClick(function() {
        jQuery("body").addClass("active");
        jQuery(aPanel).addClass("active");
        jQuery("<div id='aPanelOverlay'></div>").appendTo(".page");
    }, function() {
        jQuery("body").removeClass("active");
        jQuery(aPanel).removeClass("active");
        jQuery("#aPanelOverlay").remove();
    });
});

/* DEFINE APANEL FUNCTIONALITY */ 是我遇到问题的地方。上面的所有其他内容都定义了 toggleClick 函数和 aPanel 变量 ID。

通过单击位于屏幕左上角的菜单按钮，您可以在下面看到我遇到的问题的实时版本。

现场版：

http://iamaaron.com/alpha/

非常感谢！

4

1 回答 1

1

首先当你调用时jQuery('#apanel-fire,#aPanelOverlay').toggleClick覆盖不存在，因为它是稍后附加的。所以它没有点击处理程序，也不会对任何点击做出反应。

第二个（这不再重要了；）return this.click(function(){将为每个元素附加一个点击处理程序。jQuery(this).data('iteration',iteration)将iteration在#apanel-fire第一次点击时存储。当您现在单击覆盖时，它iteration仍然为 0。因此将再次调用第一个函数。

更新：一个非常简单的解决方案

   function showOverlay() {
        jQuery("body").addClass("active");
        jQuery(aPanel).addClass("active");
        jQuery("<div id='aPanelOverlay'></div>").appendTo(".page").click(hideOverlay);
    }
    function hideOverlay() {
        jQuery("body").removeClass("active");
        jQuery(aPanel).removeClass("active");
        jQuery("#aPanelOverlay").remove();
    }

   jQuery('#apanel-fire').click(showOverlay);
于 2013-06-27T19:15:05.460 回答