3

これは単純で、ある種のスコーピングの問題だと思いますが、行き詰まっています。以下のコードでは、「foo!」のいずれかでアラートを表示したいと考えています。または「バー！」div の上にマウスを移動すると、代わりに空のコンテンツが表示されます. alert() がある場所から、セレクターに一致する現在の要素にどのように対処しますか? TIA.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test Case</title>
    <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

    <!-- Tooltip classes -->
    <link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />

    <!-- jQuery and the Poshy Tip plugin files -->
    <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../src/jquery.poshytip.js"></script>

    <script type="text/javascript">
        //<![CDATA[
        $(function(){
            $("span[name='entity']").poshytip({
                className: 'tip-yellow',
                content: function(updateCallback) {
                            var title = $(this).attr('title');
                            alert(title);
                            updateCallback(title);
                          },
                showTimeout: 1,
                alignTo: 'target',
                alignX: 'center',
                offsetY: 5,
                allowTipHover: true
            });
        });
        //              
        //]]>
    </script>   
</head>

<body>
    <p><span name="entity" title="foo!">Hover for a tooltip 1</span></p>
    <p><span name="entity" title="bar!">Hover for a tooltip 2</span></p>

</body>
</html>
4

3 に答える 3

1

を使用した選択$(this).attr('title')は正しいです。ただし、posytip は内部で title 属性を使用しているため、一時的に title 属性を変更しているように見えます。そこにブレークポイントを設定すると、この動作を確認できます$(this)。スパンを参照しますが、タイトルは空白です。

コンテンツ コールバックの外側でスパンを選択すると、タイトルが表示されます。たとえば、デバッガーから$("span").attr("title")

poshytip の目的は強化されたツールチップを提供することなので、これはおそらく予期されていることです。実際、コンテンツ機能を完全に削除すると、正しいタイトル/ツールチップが表示されます:

    $(function(){
        $("span[name='entity']").poshytip({
            className: 'tip-yellow',
            showTimeout: 1,
            alignTo: 'target',
            alignX: 'center',
            offsetY: 5,
            allowTipHover: true
        });
    });

コンテンツ メソッドを指定すると、タイトルの計算に役立ちます (たとえば、コンテンツから他の値を返したい場合は、ツールチップに表示されます)。

また、updateCallback は主にツールチップを非同期的に更新するために使用されます: http://vadikom.com/demos/poshytip/#async-content

于 2012-11-10T19:36:21.667 に答える
1

ツールチップ プラグインは通常、タイトルの値を削除するため、ブラウザのデフォルト表示にも表示されません。このプラグインの場合、要素自体のデータ内にオリジナルを保存します。プラグインのソース コードをざっと見てみると、title.poshytipjQuerydata()メソッドを使用して保存されていることがわかります

試す

alert( $(this).data('title.poshytip' ))
于 2012-11-10T19:40:33.983 に答える
0

私はあなたがposytipのシンプルさを欠いていると信じています. アラートと言うとき、文字どおりの JavaScript アラートを意味しますか、それともポシチップ メッセージを意味しますか。poshytip メッセージが必要な場合は、適切なクラス (つまり ) を追加し、.tip-darkgrayそれに対して `.poshytip' メソッドを呼び出すだけでよいため、すべてのハンドラーが実装されます。

例：

<script type='text/javascript'>
  $(document).ready(function() {
    $("span[name='poshy']").poshytip();
  });
</script>

<span name="poshy" title="So Poshy"></span>

また、すべての jQuery を DOM Ready でラップすることを忘れないでください。

于 2012-11-10T19:31:15.220 に答える