Question

我正在尝试使用函数中的变量，但变量似乎确实有效，因为我试图在函数外部使用它。

我正在尝试使用的变量称为“viewportwidth”，我也试图在第一个“orientationchange resize”函数之后使用它。

无论如何都要在我的函数之外使用这个变量。我在一个名为'sidebarwidth'的新变量

中尝试了第一个函数

请参阅下面的代码。任何人都可以帮忙吗？

$(window).bind("orientationchange resize", function(e) {

    <?php if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) echo "$('#wrapper, #sidebar').addClass('iphone-min-height');" ; ?> 

    var viewportwidth;
    var viewportheight;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined')
    {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth !=
        'undefined' && document.documentElement.clientWidth != 0)
    {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }

    // older versions of IE

    else
    {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }

    $( '#wrapper' ).css( {
       'width'   : viewportwidth + 'px',
       'height'  : viewportheight + 'px'
    });

    var iWebkit;

    if(!iWebkit){
        iWebkit=window.onload=function(){
            function fullscreen(){
                var a=document.getElementsByTagName("a");
                for(var i=0;i<a.length;i++){
                    if(a[i].className.match("noeffect")){}

    else{a[i].onclick=function(){
        window.location=this.getAttribute("href");return false}}}}
            function hideURLbar(){window.scrollTo(0,0.9)}iWebkit.init=function(){
            fullscreen();
            hideURLbar()
        };
    iWebkit.init()}}

}).trigger("resize");

var     $openClose      = $("span.open-menu"),
        buttonwidth     = $openClose.outerWidth(),
        sidebarwidth    = viewportwidth - buttonwidth,
        $wrapper        = $("#wrapper"),
        $sidebar        = $("#sidebar"),
        menuOpen        = false;

$sidebar.css({
    'left' : '-210px',
    'width' : sidebarwidth + 'px'
});

$openClose.on('click', function () {

    if (menuOpen) { // run if button says "Close Menu"

        $sidebar.stop().animate({ left: "-" + sidebarwidth + "px" }, 400);   
        $openClose.html("Menu");
        $(this).addClass('active');
        menuOpen = false;

    } else { // run if button says "Open Menu"

        $sidebar.stop().animate({ left: "0" }, 400);
        $openClose.html("Close");
        $(this).removeClass('active');
        menuOpen = true;

    }

});

Answer 1

你为什么要这样做？！

<?php 
if( strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') 
    || strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
{
    echo "$('#wrapper, #sidebar').addClass('iphone-min-height');" ; 
}
?>

这只是愚蠢！您应该设置<body class="has-iphone">，而不是使用jQuery。没有必要使用英国媒体报道。

这没有意义。

if (typeof window.innerWidth != 'undefined')
{
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as 
//the first line in the document)

else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0)
{
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    viewportheight = document.getElementsByTagName('body')[0].clientHeight
}

没有人再支持IE6，那将是“老IE”？你真的期待IE5.5的用户吗？这只是复制粘贴的一个坏例子......

至于原始问题，如果你想在两个或多个函数之间共享变量，而不是放在全局范围内，那么使用闭包：

var handlers = (function () {
        var shared_variable,
            current;
        return {
            click: function (e) {
               // code for click handler
            },
            mouseover: function (e) {
            },
            mouseout: function (e) {
            }
       };

    }()),
    menu = document.getElementById('menu');

$(document).on('click', handler.click);
$(menu).on('mouseover', handler.mouseover);
$(menu).on('mouseout', handler.mouseout);

所有功能都将共享current变量，例如，在构建响应式菜单时非常有用。

P.S 另外，你应该尽量避免在javascript中设置css值。首先，它违反了SoC，它还会在浏览器中为您设置的每个值触发Reflow。

Answer 2

在orientationchange和resize的处理程序之外声明变量。我还建议将所有内容包装在一个闭包中，以避免污染全局命名空间：

(function(){
    var viewportwidth;
    var viewportheight;

    $(window).bind("orientationchange resize", function(e) {
    // Rest of your current code

})();

Answer 3

将变量移到更高的范围;然后它应该可用于两个功能。

如果它们是全局变量，则两个函数都应该能够看到它们。

Answer 4

从viewportwidth函数中取出resize使其成为某个全局对象的全局或属性，然后在调整大小时设置该变量onclick从viewportwidth计算各种值并使用它们。

在另一个函数jQuery中使用变量

4 个答案: