0

FAQ を読みましたが、ここでコード エラーを実行する必要があるかどうかが明確ではありません。とにかく、このスニペット (私が取り組んでいるプロジェクトから抜粋したもの) には苦労しています。JSFiddleをチェックインすると}、 を閉じることを期待していたanimate({が、代わりに見つかったことがわかりまし300たが、一致するものが何もないため、 animate は既に閉じられているため意味がありません。

コンソールは、前のコンマ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です。それを変数とは見なさず、オブジェクト内のプロパティの識別子と見なします。

同様に、関数を呼び出すときに、2 つのプロパティではなく 2 つの値を含む文字列を使用することはできません。ただし、css関数は 2 つのパラメーターの代わりにオブジェクトを取ることができます。

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()オブジェクト プロパティの 1 つのセットが既にあり、別のセットの内容をマージする場合は、このオプションを使用することをお勧めします。1 つのプロパティを追加するだけの場合は、後者の方法の方が簡単です。

于 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 に答える