如何避免这个很长的if else语句
how to avoid this very long if else statement
我还在学习javascript,我一直在寻找方法,使我的代码更好。我写了这个非常长的 if else语句。我想知道是否有更简单的方法来实现这一点。这段代码使用jquery transit来动画旋转。基本上,当用户单击链接时,导航会将被单击的链接旋转到顶部位置。导航定位在一个圆圈内。
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;
}
});
可以使用switch
现场演示
condition = rotation + "_" + itemI
switch(condition)
{
case "0_0":
//your code
break;
case "90_0":
//your code
break;
//Similarly you can add all cases.
}
这样可以缩短代码。
创建一个2d数组,键值为rotation和itemI,值为degval
的组合。则直接访问数组并运行命令,如下所示
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];
相关文章:
- 如何在ReactJS JSX中执行嵌套的if-else语句
- Javascript Return and if/else
- JavaScript if-else 速记错误
- 如何检查if/else语句中的随机条件
- 在javascript中创建数组,而不是if.else
- Javascript If else 只返回 TRUE 或只返回 FALSE
- jquery if else不返回警报消息
- 在Javascript中为if/else语句添加OR
- If Else Java Script HTML
- jQuery/Javascript foreach If/Else |如果为空(不执行任何操作)Else(显示forea
- 我应该如何应用if-else条件来向具有不同用户角色的人显示不同的菜单
- geoTest函数-创建if/else语句
- JavaScript中的温度转换器(IF ELSE条件)
- Jquery/Javascript使用IF/ELSE语句更改img SRC
- 编写if-else语句的更好方法
- 在if/else语句中显示DIV
- PHP If Else-隐藏按钮
- JavaScript if/else未按预期操作
- if/else运算符未更改
- 名称不能以''jquery-if-else条件中的字符