0

我确实希望我的问题适合这里，因为我阅读了常见问题解答，但我不清楚是否应该在这里运行代码错误。无论如何，这个片段（从我工作的项目中提取）让我很难过。在检查JSFiddle时，它​​告诉我它期望}关闭animate({但是 found 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
4

4 回答 4

4

没有为 中的值指定键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);
于 2013-01-13T11:27:19.107 回答
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);
于 2013-01-13T11:27:30.743 回答
2

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

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

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()如果您已经拥有一组对象属性并想要合并另一组的内容，则首选。对于仅添加一个属性，后一种方法更简单。

于 2013-01-13T11:30:05.000 回答
1

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

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);

这更像是一种“数学家”的方法，当您需要从基本方程的许多变体中进行选择时适用。在这种情况下，该模式节省了代码（尽管不是内存），并且可以提供良好的可扩展性。

于 2013-01-13T13:52:44.710 回答