2

ユーザーがこのようなものを入力して通知を定義できるようにするプラグインを作成しています。

growl-top-left-300px;

幅をなくすために分割を使用していましたが、ユーザーには次の選択肢があったため、かなりの数の if ステートメントが必要でした。

たとえば、私が持っていた

if (position == "growl-top-left" || position == "growl-left-top") {
    container.css ({
        top: '0px',
        left: '0px'
    });
}else if (position == "growl-top-right" || position == "growl-right-top") {
    container.css ({
        top: '0px',
        right: '0px'
    });
}else if (position == "growl-top-center" || position == "growl-center-top") {
    // apply css // Not done yet
}else if (position == "growl-bottom-left" || position == "growl-left-bottom") {
    container.css ({
        bottom: '0px',
        left: '0px'
    });
}else if (position == "growl-bottom-right" || position == "growl-right-bottom") {
    container.css ({
        bottom: '0px',
        right: '0px'
    });
}else if (position == "growl-bottom-center" || position == "growl-center-bottom") {
    // apply css // not done yet
}

しかし、ご想像のとおり、それは多くの冗長なコードのように思えます。誰かがそれをクリーンアップするためのより良い方法を持っているかどうか知りたいだけですか?

上部と左側の css 値を取得できればいいと思ったので、次のコードを記述できます。

container.css ({
    retrivedCSS[0]: '0px',
    retrivedCSS[1]: '0px'
})

ここで、retrivedCSS[0] が最初の位置になり、[1] が 2 番目の位置になります

4

3 に答える 3

2

位置文字列を分割してそれらのトークンを使用するのはどうですか。下記参照、

var tokens = position.split('-');

var updateCSS = {};
updateCSS[tokens[1]] = updateCSS[tokens[2]] = '0px';    

container.css (updateCSS);

などのより複雑な文字列を使用する場合growl-top-center-paddingは、繰り返しを使用してください。

var updateCSS = {};
var tokens = position.split('-');

for (var i = 0; i < tokens.length; i++) {
   if(tokens[i] == 'growl') continue;

   updateCSS[tokens[i]] = '0px';
}

container.css (updateCSS);
于 2013-03-01T16:26:50.297 に答える
2

これはどう：

// map string to one key
var key = position.split("-").sort().join("-");

var map = {

    "growl-bottom-center": "your CSS",
    // ...
    "growl-right-top": "your CSS"

}

applyCSS(map[key]);
于 2013-03-01T16:19:23.503 に答える
1

フォールスルー switch ステートメントを使用することもできますが、それでもかなり醜いものです。

switch(position.split("-").sort().join("-")) {
    case 'growl-top-left': //apply css
        break;
    case 'growl-center-top': // apply css
        break;
}

position.split("-").sort().join("-") の使用に関する素晴らしい提案をしてくれた @Amberlamps に感謝します。彼の完全なソリューションは、これよりも絶対に優れています。

于 2013-03-01T16:18:46.580 に答える