0

訪問者がマウスをテーブルの行の上に置いたときに、マウスの横に画像を表示しようとしています。行ごとに、別の画像を表示したいと思います。

今のところ、テーブル セル内のコンテンツに対してのみ動作し、コンテンツ自体に対してのみ動作しますが、コンテンツがあるかどうかにかかわらず、行全体では動作しません。

次の jQuery コードを使用しています。

<script type="text/javascript">
    this.screenshotPreview = function() {
        /* CONFIG */
        xOffset = 0;
        yOffset = 0;
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result
        /* END CONFIG */
        $(".screenshot").hover(function(e) {
            this.t = this.title;
            this.title = "";
            var c = (this.t != "") ? "<br/>" + this.t : "";
            $("body").append("<p id='screenshot'><img src='" + this.rel + "' alt='Drinkbak' />" + c + "</p>");
            $("#screenshot")
                .css("top", (e.pageY - xOffset) + "px")
                .css("left", (e.pageX + yOffset) + "px")
                .fadeIn("fast");
            },
            function() {
                this.title = this.t;
                $("#screenshot").remove();
            }
        );
        $(".screenshot").mousemove(function(e) {
            $("#screenshot")
                .css("top", (e.pageY - xOffset) + "px")
                .css("left", (e.pageX + yOffset) + "px");
        });
    };

// starting the script on page load
    $(document).ready(function() {
        screenshotPreview();
    });
</script>

機能するコードですが、表のセル内のコンテンツに対してのみ:

<tr onclick="window.open('/Drinkbak-type-B-80-geschikt-voor-rundvee-en-paarden_pr_850861?i-knop', '_blank');">
    <td class="wkekaSubject"><a title="Drinkbak" class="screenshot" rel="http://dev-jarola3-nl.softlution.com/is-bin/intershop.static/WFS/Jarola-Wildkamp-Site/Jarola-Wildkamp/nl_NL/i-knoppen/850861.png">Drinkbak,<br />type B 80</a></td>
    <td class="wkeka2Options wkekaOption1">X</td>
    <td class="wkeka2Options wkekaOption2">&nbsp;</td>
    <td class="wkeka2Options wkekaOption3">&nbsp;</td>
    <td class="wkeka2Options wkekaOption4">X</td>
    <td class="wkeka2Options wkekaOption5">&nbsp;</td>
    <td class="wkeka2Options wkekaOption6">&nbsp;</td>
    <td class="wkeka2Options wkekaOption7">&nbsp;</td>
</tr>

ここでは、<a title="Drinkbak" class="screenshot" rel="http://dev-jarola3-nl.softlution.com/is-bin/intershop.static/WFS/Jarola-Wildkamp-Site/Jarola-Wildkamp/nl_NL/i-knoppen/850861.png">Drinkbak,<br />type B 80</a>要素が画像のサムネイルを処理します。

このコードを表の行全体で機能させるのを手伝ってもらえますか?

4

1 に答える 1

1

ツールチップを表示するために「スクリーンショット」クラスをターゲットにしています。これが問題です。これを解決するには、「td」内の「a」タグではなく「tr」でイベントをバインドする必要があります。だから私の提案は、

//Bind the event with "tr" and delegate the event to "a" tag
$('tr').on('mouseenter','td a[rel]', function(e) {
    this.t=this.title;
    this.title="";
    var c=(this.t!="")?"<br/>"+this.t:"";
    $("body").append("<p id='screenshot'><img src='"+this.rel+"' alt='Drinkbak' />"+c+"</p>");
    $("#screenshot").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px").fadeIn("fast");
})

注: 私は自分のコードをテストしておらず、マウス リーブを処理する機能を追加していません。私はこれらのことをあなたに任せました。

于 2013-10-10T09:27:59.057 に答える