Question

我试图让下面的代码不那么难看，不知道该怎么做。你们有什么建议吗？谢谢很多。

  if($element.is('builder') || $element.is('#options') ){
     tooltipYPos=yPos + 35; 
    }

  if($element.is('#button')){
     tooltipXPos=xPos - 240; 
    }
  if($element.is('#addn')){
     tooltipXPos=xPos - 295; 
     tooltipYPos=yPos - 80; 
    }  


   if($element.is('#count')){
     tooltipXPos=xPos + 180; 
     tooltipYPos=yPos - 90; 
    } 
   if($element.is('label')){
       tooltipXPos=xPos + 80; 
     tooltipYPos=yPos - 90; 
   }

Answer 1

一般的解决方法是将问题从代码转移到数据。一个解决方案（如下所示）是设置一个键入各种ID标签的JavaScript关联数组，值是值对X和Y偏移（在某些情况下，一个或另一个是0）。在使用时，循环关联数组的键，寻找匹配。如果是这样，请将关联数组中的X和Y偏移添加到toolTipXPos和toolTipYPos。

这样可以将您的偏移保留在一个地方，不受影响，并且操作它们的代码简短而简单。

（未经测试，自然而然）

// This can be stashed away anywhere.
var a = {
    '#te_classbuilder':              { X: 0,    Y: 35  },
    '#te_options':                   { X: 0,    Y: 35  },
    '#lesson-details-extend-button': { X: -240, Y: 0   },
    '#asset-list-asset-add-button':  { X: 295,  Y: -80 },
    '#asmnt_option_label_q_count':   { X: 180,  Y: -90 },
    "label":                         { X: 80,   Y: -90 }
}

// Put this where you need the actual evaluation to happen  
jQuery.each(data, function(key, value) {
    if ( $element.is(key) ) {
        tooltipXPos = xPos + value.X;
        tooltipYPos = yPos + value.Y;
    }
});

修改：更改为循环，以便可以测试label，而不是#label。

Answer 2

另一种选择是利用jQuery的.data函数在元素本身上存储适当的X和Y值，如下所示：

$('label').data({ x: 80, y: -90 });
$('#te_classbuilder, #te_options').data({ x: 0, y: 35 });
$('#lesson-details-extend-button').data({ x: -240, y: 0 });
$('#asset-list-asset-add-button').data({ x: -295, y: -80 });
$('#asmnt_option_label_q_count').data({ x: 180, y: -90 });

然后，当需要修改工具提示位置值时，不需要条件语句。只需从x。

中检索y和$element数据属性

tooltipXPos = xPos + $element.data('x');
tooltipYPos = yPos + $element.data('y');

当然，这假设任何可能分配给$element的元素之前已经.data调用了x和y个值。< / p>

Answer 3

你可以计算出$ element的高度/宽度，然后相应地改变tooltipXPos / tooltipYPos，而不是对增量进行硬编码吗？

Answer 4

首先，如果你可以结合条件：

if ($element.is('#te_classbuilder, #te_options')) {
  tooltipYPos = yPos + 35; 
}

如果我们无法做出一些重大改变，那么我会这样写：

if ($element.is('#te_classbuilder, #te_options')) tooltip = { x: 0,          y: yPos + 35 };
if ($element.is('#lesson-details-extend-button')) tooltip = { x: xPos - 240, y: 0 };
if ($element.is('#asset-list-asset-add-button'))  tooltip = { x: xPos - 295, y: yPos - 80 };
if ($element.is('#asmnt_option_label_q_count'))   tooltip = { x: xPos + 180, y: yPos - 90 };
if ($element.is('label'))                         tooltip = { x: xPos + 80;  y: yPos - 90 };

如何使我的条件语句不那么难看

4 个答案: