2017-05-30 13 views
0

JavaScriptでこの問題を解決する方法がわからないので、私は "動的変数"について熟知しています。それを行うためのより良い方法があれば、私に教えてください!今、私は高さ(+/- 28px)の変化が依存していること、コードを追加したい関数内で "動的変数"を使用する

var footerMenuLeftOpen = true; 
 
var footerMenuRightOpen = true; 
 

 
function footerMenu(menuName, className) { 
 

 
    if (menuName) { 
 
    $('.content-' + className).animate({ 
 
     height: "+=28px", 
 
    }, { 
 
     duration: 100 
 
    }); 
 
    return false; 
 
    } else { 
 
    $('.content-' + className).animate({ 
 
     height: "-=28px", 
 
    }, { 
 
     duration: 100 
 
    }); 
 
    return true; 
 
    } 
 
} 
 

 

 
$(".content-left").click(function() { 
 
    footerMenuLeftOpen = footerMenu(footerMenuLeftOpen, 'left'); 
 
}); 
 
$(".content-right").click(function() { 
 
    footerMenuRightOpen = footerMenu(footerMenuRightOpen, 'right'); 
 
});
.content-left { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: red; 
 
    display: inline-block; 
 
} 
 

 
.content-right { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    display: inline-block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content-left"> 
 

 
</div> 
 

 
<div class="content-right"> 
 

 
</div>

:考える

は、(左または右)一つのパラメータを持つ関数であります赤色または青色のボックスの高さに合わせます。 したがって、ボックスが表示されるとすぐにボックスの開始高さを確認したいと思います。例えば

if ($('.content-left').height() > 42) { 
    LeftHeight: "+=28px", 
} else if ($('.footer-button-box.left').height() > 28) { 
    LeftHeight: "+=14px", 
} else { 
    LeftHeight: "+=5px", 
} 

しかし、どのように高さの変化があれば、関数から決定された値に係るように、私は今機能「フッター」の高さ値を変更できますか?

私はclassNameがプラス用語「身長」「左」されるだろう

$('.content-' + className).animate({ 
     height: className+Height, 
    }, { 
     duration: 100 
    }); 

のようなもの...について取り払わ。だからleftHeight。

私はそこでは、より良い解決策が1つのエレガントな機能を動作させるためにあると思いますか?

ありがとうございます!

EDIT:私の質問は簡単な言葉で、理解するのは難しいですので:

私は、変数を持っている "leftHeight" と "rightHeight"。 今、左/右がパラメータの値である関数からこれらの変数にアクセスするにはどうすればよいですか?

目標:高さ:leftHeight

アイデア:高さ:クラス名+「高さ」

...ので、どのように変数名の一部として、関数のパラメータの値を使用するには?

+0

'if'は関数ではありませんし、何も返しません。三項演算子を使用し、それらをプロパティ値の場所に配置します。 – Bergi

+0

あなたがここで何をしようとしているのか分かりませんが、あなたが望むのであれば、要件を満たしていると思われるflexboxを見てください。 –

答えて

0

自分自身で解決策を見つけました。オブジェクトを使用する必要がありました。

var footerMenuHeight = new Object(); 

if ($(".content-left").height() > 40) { 
    footerMenuHeight.left = 200; 
} else if ($(".content-left").height() > 30) { 
    footerMenuHeight.left = 18; 
} else { 
    footerMenuHeight.left = 8; 
} 

だから私は、このオブジェクトの値にアクセスするためのパラメータを使用することができました:

footerMenuHeight[className] 
+0

JavaScriptでは、 'new 'の代わりに' {} 'を使うのは慣用ですオブジェクト() ' –

関連する問題