0

私はまだ JavaScript を学んでおり、コードを改善する方法を常に探しています。if else ステートメントを非常に長く書きました。これを達成するためのより簡単な方法があるかどうか疑問に思っています。このコードでは、 jquery トランジットを使用して回転をアニメーション化しました。基本的に、ユーザーがリンクをクリックすると、ナビゲーションはクリックされたリンクを一番上の位置に回転させます。ナビゲーションは円形に配置されています。

var rotation = 0;
$('nav ul li a').bind('click', function () {
    'use strict';
    var item = $(this).parent();
    var itemI = item.index();
    var navAll = $(this).parents('ul');
    var pos0 = (rotation === 0);
    var pos1 = (rotation === 90);
    var pos2 = (rotation === 180);
    var pos3 = (rotation === 270);
    var item0 = (itemI === 0);
    var item1 = (itemI === 1);
    var item2 = (itemI === 2);
    var item3 = (itemI === 3);
    //------------------pos0 = 0----------------------------
    if (pos0 && item0) {
        //do nothing 0
    } else if (pos0 && item1) {
        navAll.transition({
            rotate: '-=90deg'
        });
        $('nav ul li a').transition({
            rotate: '90deg'
        });
        rotation = 270;
    } else if (pos0 && item2) {
        navAll.transition({
            rotate: '-=180deg'
        });
        $('nav ul li a').transition({
            rotate: '180deg'
        });
        rotation = 180;
    } else if (pos0 && item3) {
        navAll.transition({
            rotate: '+=90deg'
        });
        $('nav ul li a').transition({
            rotate: '-90deg'
        });
        rotation = 90;
    }
    //------------------pos1 = 90----------------------------
    else if (pos1 && item0) {
        navAll.transition({
            rotate: '0deg'
        });
        $('nav ul li a').transition({
            rotate: '0deg'
        });
        rotation = 0;
    } else if (pos1 && item1) {
        navAll.transition({
            rotate: '-90deg'
        });
        $('nav ul li a').transition({
            rotate: '90deg'
        });
        rotation = 270;
    } else if (pos1 && item2) {
        navAll.transition({
            rotate: '+=90deg'
        });
        $('nav ul li a').transition({
            rotate: '-180deg'
        });
        rotation = 180;
    } else if (pos1 && item3) {
        //do nothing 90
    }
    //------------------pos2 = 180----------------------------
    else if (pos2 && item0) {
        navAll.transition({
            rotate: '0deg'
        });
        $('nav ul li a').transition({
            rotate: '0deg'
        });
        rotation = 0;
    } else if (pos2 && item1) {
        navAll.transition({
            rotate: '-90deg'
        });
        $('nav ul li a').transition({
            rotate: '90deg'
        });
        rotation = 270;
    } else if (pos2 && item2) {
        //do nothing
        rotation = 180;
    } else if (pos2 && item3) {
        navAll.transition({
            rotate: '-=90deg'
        });
        $('nav ul li a').transition({
            rotate: '-90deg'
        });
        rotation = 90;
    }
    //------------------pos3 = 270----------------------------
    else if (pos3 && item0) {
        navAll.transition({
            rotate: '0deg'
        });
        $('nav ul li a').transition({
            rotate: '0deg'
        });
        rotation = 0;
    } else if (pos3 && item1) {
        //do nothing
    } else if (pos3 && item2) {
        navAll.transition({
            rotate: '-=90deg'
        });
        $('nav ul li a').transition({
            rotate: '180deg'
        });
        rotation = 180;
    } else if (pos3 && item3) {
        navAll.transition({
            rotate: '-=180deg'
        });
        $('nav ul li a').transition({
            rotate: '-90deg'
        });
        rotation = 90;
    }
});
4

2 に答える 2

2

You can use switch

Live Demo

condition = rotation + "_" + itemI 

switch(condition)
{
   case "0_0":
        //your code
        break;
   case "90_0":
        //your code
        break;

   //Similarly you can add all cases.
}
于 2012-12-27T07:12:46.587 に答える
0

これにより、コードが短くなる可能性があります。

回転と itemI のキーと deg val の結果の組み合わせの値を持つ 2 次元配列を作成します

次に、配列にアクセスして、次のようにコマンドを実行します

if(degVal[rotation][itemI]<0)
    rotateSign = '-';
else
    rotateSign = '+';

navAll.transition({rotate: rotateSign+'='+degVal[rotation][itemI]+'deg'});
$('nav ul li a').transition({rotate: degVal[rotation][itemI]+'deg'});
rotation = degVal[rotation][itemI];
于 2012-12-27T07:19:05.890 に答える