Question

我有这个脚本，它完全符合我的要求。显示和隐藏一个div并跟随鼠标光标并仅在视口是一定大小及以上时执行它，但我想知道如何压缩它以使整个脚本不重复两次，一个用于加载，一个用于在收听浏览器窗口大小时。

<script>
$( document ).ready(function() { //document ready
    $( window ).on( "load", function() { //entire page has loaded

        if ($(window).width() < 963) {
            tip = $(this).nextAll('#tail');
            tip.hide();
        }
        else {
            //Tooltips
            $("#mainbody").hover(function(){
                tip = $(this).nextAll('#tail');
                tip.show(); //Show tooltip
            }, function() {
                tip.hide(); //Hide tooltip
            }).mousemove(function(e) {
                if ($(window).width() > 962) {
                    //Change these numbers to move the tooltip offset
                    var mousex = e.pageX + 20; //Get X coodrinates
                    var mousey = e.pageY + 20; //Get Y coordinates
                    var tipWidth = tip.width(); //Find width of tooltip
                    var tipHeight = tip.height(); //Find height of tooltip
                    //Distance of element from the right edge of viewport
                    var tipVisX = $(window).width() - (mousex + tipWidth);
                    //Distance of element from the bottom of viewport
                    //var tipVisY = $(window).height() - (mousey + tipHeight);
                    var tipVisY = $("#mainbody").height() - (tipHeight);
                    if (tipVisX < 1) { //If tooltip exceeds the X coordinate of viewport
                        //mousex = e.pageX - tipWidth - 20;
                    } if (tipVisY < 1) { //If tooltip exceeds the Y coordinate of viewport
                        //mousey = e.pageY - tipHeight - 20;
                    }
                    //Absolute position the tooltip according to mouse position
                    tip.css({  top: mousey, left: mousex });
                }
            });
        }

        $( window ).resize(function() {
            if ($(window).width() < 963) {
                tip = $(this).nextAll('#tail');
                tip.hide();
            }
            else {
                //Tooltips
                $("#mainbody").hover(function(){
                    tip = $(this).nextAll('#tail');
                    tip.show(); //Show tooltip
                }, function() {
                    tip.hide(); //Hide tooltip
                }).mousemove(function(e) {
                    if ($(window).width() > 962) {
                        //Change these numbers to move the tooltip offset
                        var mousex = e.pageX + 20; //Get X coodrinates
                        var mousey = e.pageY + 20; //Get Y coordinates
                        var tipWidth = tip.width(); //Find width of tooltip
                        var tipHeight = tip.height(); //Find height of tooltip
                        //Distance of element from the right edge of viewport
                        var tipVisX = $(window).width() - (mousex + tipWidth);
                        //Distance of element from the bottom of viewport
                        //var tipVisY = $(window).height() - (mousey + tipHeight);
                        var tipVisY = $("#mainbody").height() - (tipHeight);
                        if (tipVisX < 1) { //If tooltip exceeds the X coordinate of viewport
                            //mousex = e.pageX - tipWidth - 20;
                        } if (tipVisY < 1) { //If tooltip exceeds the Y coordinate of viewport
                            //mousey = e.pageY - tipHeight - 20;
                        }
                        //Absolute position the tooltip according to mouse position
                        tip.css({  top: mousey, left: mousex });
                    }
                });
            }
        });

    });
});
</script>

Answer 1

您可以插入代码来运行，并在您想要的地方调用此函数。

$( document ).ready(function() { //document ready
    $( window ).on( "load", function() { //entire page has loaded


        change(this)
        $( window ).resize(function() {
            change(this)
        });

    });
});

function change(_this){
    if ($(window).width() < 963) {
            tip = $(_this).nextAll('#tail');
            tip.hide();
        }
        else {
            //Tooltips
            $("#mainbody").hover(function(){
                tip = $(this).nextAll('#tail');
                tip.show(); //Show tooltip
            }, function() {
                tip.hide(); //Hide tooltip
            }).mousemove(function(e) {
                if ($(window).width() > 962) {
                    //Change these numbers to move the tooltip offset
                    var mousex = e.pageX + 20; //Get X coodrinates
                    var mousey = e.pageY + 20; //Get Y coordinates
                    var tipWidth = tip.width(); //Find width of tooltip
                    var tipHeight = tip.height(); //Find height of tooltip
                    //Distance of element from the right edge of viewport
                    var tipVisX = $(window).width() - (mousex + tipWidth);
                    //Distance of element from the bottom of viewport
                    //var tipVisY = $(window).height() - (mousey + tipHeight);
                    var tipVisY = $("#mainbody").height() - (tipHeight);
                    if (tipVisX < 1) { //If tooltip exceeds the X coordinate of viewport
                        //mousex = e.pageX - tipWidth - 20;
                    } if (tipVisY < 1) { //If tooltip exceeds the Y coordinate of viewport
                        //mousey = e.pageY - tipHeight - 20;
                    }
                    //Absolute position the tooltip according to mouse position
                    tip.css({  top: mousey, left: mousex });
                }
            });
        }
}

Answer 2

另一种方法是使用.trigger('[eventname]')：

手动触发事件处理程序

$( window ).on( "load", function() { 
    $( window ).resize(function() {
        //do some stuff
    }).trigger('resize');
});

我该如何收缩这个jquery？

2 个答案: