2

我正在为即将到来的项目做的事情之一是标注/工具提示系统。理论上，这是一件简单的小事。你采取一些这样的标记：

<script src='jQuery 1.10.1'></script>
<a href='#' id='callout-link'>Click Me</a>

<div id='callout-id' class='callout hidden'>
    This is my tooltip text.
</div>

/* CSS Styling... */
.callout {
     position: absolute;
     z-index: 2;
}

.hidden {
     display: none;
}

...并将其绑定在 JavaScript 中，以便每当您单击某个链接时，它都会切换可见性。

// ...Page Script...
var $link = $('#callout-link'),
    $callout = $('#callout-id');

$(document).ready(function () {
    var callout = new MyCallout($link, $callout);
    callout.bindToControlClick();
});

// ...Object Definition...
var MyCallout = function ($control, $callout) {
    init();

    // Public Scope...
    var pub = {};
    pub.$actionControl = $control;
    pub.$callout = $callout;

    pub.bindToControlClick = function () {
        pub.$actionControl.click(function (e) {
            e.preventDefault();
            e.stopPropagation();

            toggleCallout();                
        });
    }

    // Private Scope...
    function init() {
        // The callout-content subdiv is necessary for other operations that are
        // likely not relevant to the problem I am encountering.
        if($callout.children('.callout-content').length == 0)
            $callout.wrapInner('<div class="callout-content" />');
    }

    function toggleCallout() {
        if(pub.$callout.is(':hidden')) {
            // Show is actually more complicated than this, but that's not the problem.
            pub.$callout.show();
        } else {
            pub.$callout.hide();
        }
    }

    return pub;
};

问题是，虽然标注最初是从视图中隐藏的，并且在单击时出现，但尝试关闭标注会失败。当我在 Chrome 调试器中添加断点和监视值时$callout.is(':hidden')，即使元素可见，监视值也会计算为true。

根据:hidden 选择器的 jQuery 条目，似乎在任何给定时间都在检查许多属性，这让我想到了一个问题：在我的设置中是什么在设法欺骗 jQuery 的:hidden选择器使其始终相信标注被隐藏，即使不再如此？

编辑：由于我在侧面板中注意到我最近的一个问题，因此我的团队已确保我们的应用程序在 IE9 标准模式下运行，因此环境不应该成为问题。

编辑2：有问题的代码的小提琴（更新！问题完全再现。）

4

2 回答 2

2

尝试使用hasClass代替：

function toggleCallout() {
    if(pub.$callout.hasClass('hidden')) {
        pub.$callout.removeClass('hidden');
    } else {
        pub.$callout.addClass('hidden');
    }
}

甚至使用toggleClass更快：

function toggleCallout() {
    pub.$callout.toggleClass('hidden');
}

还要确保MyCallout在使用之前放置您的声明，否则您会收到类似的错误

未捕获的类型错误：未定义不是函数

打电话时

var callout = new MyCallout($link, $callout);

工作的小提琴

于 2013-08-07T16:31:03.437 回答
0

问题实际上是一个 CSS 问题 - 虽然我的代码是理智的（正如我的 OP 中的 jsFiddle 所示），但.calloutdiv 以默认尺寸呈现width: 0; height: 0，这会导致:hidden选择元素。

我所要做的就是添加以下 CSS 来解决我的问题：

.callout {
    width: 1em;
    height: 1em;
    /* ...As before... */
}

教训：始终检查元素！看起来像脚本错误的东西，实际上可能完全是另外一回事。

于 2013-08-07T21:03:24.793 回答