3

jQuery qTip プラグインを使用して、マウスオーバー リンク/img の div を表示します。使用する 2 つのオプションを書きましたが、どちらも問題を引き起こしています。

V1: 最初のバージョンではツールチップが表示されますが、2 回目にマウスをリンクの上に移動したときにのみ表示されます。リンク上でマウスを繰り返した後、スクリプトはどんどん遅くなり、6/7 回後にブラウザがクラッシュしそうになりました...ここで何が問題なのですか?

V2: 私の 2 番目のバージョンでは、qTip を通常の方法で使用しようとしていますが、関連する div のコンテンツを qTip コンテンツに入れようとしていますが、それは起こっていません。おそらく、qTip プラグインは構成内の関数を受け入れませんよね?

これら 2 つのスクリプトを見て、何が間違っているのか教えていただけますか? もうわかりません。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Project</title>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script> <!-- http://craigsworks.com/projects/qtip/ -->

    <SCRIPT LANGUAGE="JavaScript">
    jQuery(document).ready(function() {

        // hide all tooltip div's
        $(".tooltip_request").hide();


        // V1 - show qtip layer - THIS ONE GETS VERY SLOW AFTER MOUSEOVER-ING several times??
        $(".editrequest_v1").live('mouseover', function() {
            var request = $(this).attr('id'); // "request1"
            var name_tipdiv = "tooltip"+request;
            var div_content = $("#"+name_tipdiv).html();

            $(this).qtip({
                content: div_content,
                style: 'light',
            });
        });

        // V2 - show qtip layer - this one is not getting slow, but does not show the content
        $(".editrequest_v2").qtip({
            content: function() {
                var request = $(this).attr('id'); // "request1"
                var name_tipdiv = "tooltip"+request;
                var div_content = $("#"+name_tipdiv).html();
                return div_content;
            },
            style: 'light',
        });
    });
    </SCRIPT>
</head>
<body>

    <a href="#" class="editrequest_v1" id="request1">Show tooltip v1/content 1 - get slow and needs 2 times a mouseover before shows tooltip</a><br>
    <a href="#" class="editrequest_v1" id="request2">Show tooltip v1/content 2 -get slow and needs 2 times a mouseover before shows toolti</a>
    <div class="tooltip_request" id="tooltiprequest1">CONTENT Tooltip 1</div>
    <div class="tooltip_request" id="tooltiprequest2">CONTENT Tooltip 2</div><br><br>

    <a href="#" class="editrequest_v2" id="request3">Show tooltip v2/content 3 - does not show content in tip</a><br>
    <a href="#" class="editrequest_v2" id="request4">Show tooltip v2/content 4 - does not show content in tip</a>
    <div class="tooltip_request" id="tooltiprequest3">CONTENT Tooltip 3</div>
    <div class="tooltip_request" id="tooltiprequest4">CONTENT Tooltip 4</div><br><br>

</body>
</html>

たくさんの感謝！

PS私はjQueryの初心者です-わずか4週間です:-)

4

2 に答える 2

4

以下を使用してください

$(".editrequest_v2").each(
  function(){
    $(this).qtip({
      content: $("#tooltip"+$(this).attr('id')).html(),
      style: 'light',
    });
  });

最初の試行でのエラーは、マウスオーバーごとに新しいツールチップを作成したことでした。

2回目の試行では、許可されていない関数を使用するという問題がありました。

于 2010-01-25T15:38:48.900 に答える
1

bindの代わりに使ってみてくださいlive。今後AJAXを使用してロードするすべてのクラスにイベントをバインドする場合にのみ、ライブを使用してください。

于 2010-01-25T15:34:01.203 に答える