Question

我希望我的问题适合这里，因为我阅读了常见问题，但我不清楚我是否应该在这里运行代码错误。无论如何，这个片段（从我工作的项目中提取）让我很难过。在办理JSFiddle登记时，它告诉我预计会}关闭animate({，而是找到300，但这没有意义，因为没有什么可匹配的，动画已经关闭。

然后

控制台告诉我300之前的逗号是意外的。我真的不明白它的问题！

var condition = offL > ((wW / 2) - $this.width()),
  propertiesAnim = [],
  propertiesCss = [];

if (condtion) {
  properties = "'left': offL - tooltip.width() - 25";
  propertiesCss = "'right', 'auto'";
} else {
  properties = "'right': offR - tooltip.width() - 25";
  propertiesCss = "'left', 'auto'";
}

tooltip.stop(true).css(propertiesCss).text(title).animate({
  "top": ($this.offset().top + (posT / 2) - (tooltip.height() / 2)),
  properties
}, 300).fadeTo(200, 1); // Error

Answer 1

没有为properties中的值指定密钥。正确的语法（从严格的理论角度来看）将是：

tooltip.stop(true).css(propertiesCss).text(title).animate({
  "top": (...),
  "someKey": properties
}, 300);

当然这不会产生预期的结果，因为虽然在语法上有效，但从jQuery的角度来看它没有意义。为了使事情有效，您可以使用$.extend：

// conditional properties
if (condition) {
  properties = { "left": offL - tooltip.width() - 25 };
} else {
  properties = { "right": offR - tooltip.width() - 25 };
}

// merging the above with default properties
$.extend(properties, {
    "top": (...),
});

tooltip.stop(true).css(propertiesCss).text(title).animate(properties, 300);

Answer 2

您不能将字符串变量用作对象文字中语法的一部分。 Javascript引擎需要冒号properties之后的值。它不会将其视为变量，它将其视为对象中属性的标识符。

同样，在调用函数时，不能使用包含两个值而不是两个属性的字符串。但是css函数可以使用对象而不是两个参数。

在if语句之前创建对象，以便您可以在其中设置属性：

var condition = offL > ((wW / 2) - $this.width()),
  propertiesCss,
  properties = {
    "top": ($this.offset().top + (posT / 2) - (tooltip.height() / 2))
  };

if (condtion) {
  properties.left = offL - tooltip.width() - 25;
  propertiesCss = { right: 'auto' };
} else {
  properties.right = offR - tooltip.width() - 25;
  propertiesCss = { left: 'auto' };
}

tooltip.stop(true).css(propertiesCss).text(title).animate(properties, 300).fadeTo(200, 1);

Answer 3

您既不能添加“属性”列表，也不能将变量插入到这样的字符串中。

首先，使用正确的对象文字语法填充您的属性（需要声明为对象，而不是数组）

var properties = {}, css = {};

if (condtion) {
    properties = { left: offL - tooltip.width() - 25 };
    css = { right: 'auto' };
} else {
    properties = { right: offR - tooltip.width() - 25 };
    css = { left: 'auto' };
}

然后，使用$.extend向现有对象添加新属性，或者直接添加所需的值，即

$.extend(properties, {
    top: $this.offset().top + (posT / 2) - (tooltip.height() / 2)
});

或：

properties.top = $this.offset().top + (posT / 2) - (tooltip.height() / 2);

然后：

...animate(properties);

如果您已经拥有一组对象属性并希望合并另一个对象的内容，则首选

$.extend()。只需添加一个属性，后一种方法就更简单了。

Answer 4

对于非常不同的东西，您可以考虑这种方法：

var propertiesCss = {},
    propertiesAnim = {
        "top": ($this.offset().top + (posT / 2) - (tooltip.height() / 2))
    },
    i = 0 + (offL > ((wW / 2) - $this.width())),//0 or 1
    ii = -(i-1),//1 or 0
    sides = ['left', 'right'],
    off = [offL : offR];

propertiesAnim[sides[i]] = off[i] - tooltip.width() - 25);
propertiesCss[sides[ii]] = 'auto';

tooltip.stop(true).css(propertiesCss).text(title).animate(propertiesAnim, 300).fadeTo(200, 1);

这更像是一种“数学家”的方法，适用于需要从基本方程的多种变体中进行选择的方法。在这种情况下，该模式代码经济（虽然不是存储器），并且可以提供良好的可扩展性。

意外} - 但没有什么可以关闭

4 个答案: