如何简化此switch语句?

时间:2014-01-03 14:09:53

标签: javascript

出于某种原因,我必须将我的顶部左侧位置偏移为div。我已经开始创建这个switch语句,并注意到一个模式,当大于3时,将值增加一个数字,然后将下一个值增加最后一个偏移量 - .11。如何简化此代码,可能创建一个公式或其他内容而不是多个case语句?

这是我的代码:

matte_width_value是select语句的值;

    switch (matte_width_value)
    {
      case 2.25:
        offset = -.4;
        break;
      case 2.5:
        offset = -.7;
        break;
      case 2.75:
        offset = -1.1;
        break;
      case 3.25:
        offset = 1.35;
        break;
      case 3.5:
        offset = 1.24;
        break;
      case 3.75:
        offset = 1.12;
        break;
      case 4:
        offset = 1.01;
        break;
      //The cases will increment by .25 until it reaches <6
    }
    x = (matte_width_value + offset) * ppi; //ppi is defined elsewhere
    y = (matte_width_value + offset) * ppi;

这是正在发生的事情的图像(请注意,浅灰色矩形应该直接居中并覆盖黑色矩形,黑色矩形不是div,它是div的背景颜色):

enter image description here

这是html标记:

<div id="mattes" style="width: 247.5px; height: 292.5px; left: 201.25px; top: 23.75px;">
  <div id="opening_0" style="background-color: #bfbfbf; position: absolute; left: 63.75px; top: 63.75px; height: 138.75px; width: 93.75px; overflow: hidden; z-index: 4;" ondrop="drop(event, this)" ondragover="allowDrop(event)" onclick="photos_add_selected_fid(this);">&nbsp;</div>
  <canvas id="matte_canvas" width="247" height="292" style="z-index: 3;  "></canvas>
</div>

2 个答案:

答案 0 :(得分:11)

看起来像查找表的情况。像

var mapping = {
    '2.25':  -.4,
    '2.5':   -.7,
    // and so forth
};

offset = mapping[ matte_width_value ];

这只是原始问题的解决方案(=简化)。对于实际问题,可能有更好的解决方案。

答案 1 :(得分:0)

matte_width_value = 4;    
if (matte_width_value > 3) {  
    offset =1.35 - (((matte_width_value - 3.25) / .25) * .11);   
} else {  
    switch (matte_width_value)  
    {
        case 2.25:   
            offset = -.4;  
            break;   
        case 2.5:  
            offset = -.7;
            break;  
        case 2.75:  
            offset = -1.1;  
            break;  
    }  
}  
document.write(offset);