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 の人を期待していますか?! これは単なるコピペの悪い例です...

元の問題に関しては、2 つ以上の function 間で変数を共有し、グローバル スコープに入れずに、クロージャーを使用する場合は、次のようにします。

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に違反し、設定した値ごとにブラウザーでリフローをトリガーします。

于 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 に答える