3

我正在尝试使以下代码不那么难看，并且不知道该怎么做。你们有什么建议吗？非常感谢。 

  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; 
   }
4

4 回答 4

2

一般的解决方法是将问题从代码转移到数据。一种解决方案（如下所示）是设置一个以各种 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.

于 2012-08-23T16:34:18.057 回答
1

另一种选择是利用 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调用过它。xy

于 2012-08-23T17:01:40.423 回答
0

你能计算出 $element 的高度/宽度，然后相应地更改 tooltipXPos/tooltipYPos，而不是硬编码增量吗？

于 2012-08-23T16:21:30.783 回答
0

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

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 };
于 2012-08-23T16:22:05.737 回答