0

>> JSFIDDLE <<

タイトルは自明だと思います。このコードが機能しない理由がわかりません:

function toolTip() {
    var list = $("#readMoreUl");
    var links = list.children("li").children("a");
    var tooltips = links.children("span.tooltip");

    links.hover(function () {
        $(this).children("span.tooltip").fadeIn(350);
        },
    function () {
        $(this).children("span.tooltip").fadeOut(40);
        });    
}

$(document).ready(function () {
    $(window).resize(function() {
        if ($(window).width() > 480) {
            toolTip();
        }
    }).resize();
});

私も疑問に思いました: 最後の.resize呼び出しの使用は正しいですか? 関数が呼び出されるように実際のサイズ変更をエミュレートしwindow readyますか?

4

1 に答える 1

1

1つは、ウィンドウが480を超える場合、コードはツールチップハンドラーをインストールし、それが検出されるたびに、ツールチップハンドラーを再度インストールします（複数のイベントハンドラーが生成されます）。また、ウィンドウのサイズが480より小さい場合、ツールチップイベントハンドラーが削除されることはありません。

私はそれをこのようにすることをお勧めしますが、これははるかに簡単です：

function toolTip() {
    var list = $("#readMoreUl");
    var links = list.children("li").children("a");
    var tooltips = links.children("span.tooltip");
    var overlay = $("#overlay");

    links.hover(function () {
        if ($(window).width() > 480) {
            $(this).addClass("highlight");
            $(this).children("span.tooltip").fadeIn(350);
            overlay.fadeIn(400);
        }
    },
    function () {
        $(this).children("span.tooltip").fadeOut(40);
        overlay.fadeOut(30);
        $(this).removeClass("highlight");
    });    
}

$(document).ready(function () {
    toolTip();
});

ここで動作することがわかります：http：//jsfiddle.net/jfriend00/yVCwS/ </ p>

于 2012-07-20T15:59:12.527 に答える