javascript - 如何简化此 switch 语句？

Question

出于某种原因，我必须为 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 的背景颜色):

这是 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>

Answer 1

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

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

offset = mapping[ matte_width_value ];

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