0

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

我尝试使用的变量称为“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;

    }

});
4

4 回答 4

3

你为什么做这个 ？！

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

这简直是​​愚蠢！而不是使用 jQuery 来做这件事，你应该设置<body class="has-iphone">. 没有必要使用英国媒体报道。

这是没有意义的。

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变量，例如，在构建响应式菜单时非常有用。

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

于 2012-04-20T16:15:00.307 回答
1

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

(function(){
    var viewportwidth;
    var viewportheight;

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

})();
于 2012-04-20T15:59:38.860 回答
0

将变量移到更高的范围；然后它应该对这两个功能都可用。

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

于 2012-04-20T15:59:10.953 回答
0

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

于 2012-04-20T15:59:18.520 回答