2

今後のプロジェクトで取り組んでいることの 1 つは、コールアウト/ツールチップ システムです。理論的には、それは簡単なことです。次のようなマークアップを使用します。

<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 のエントリに基づいて、特定の時点で多数のプロパティがチェックされているように見えます。これにより、次の質問: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宣言してください。そうしないと、次のようなエラーが発生します

キャッチされていない TypeError: undefined は関数ではありません

電話するとき

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 に答える