0

このきちんとした小さなプラグインhttp://ricostacruz.com/jquery.transitを使用すると、jQuery の組み込みサポートと非常によく似ています。

$('.some-element').css({propname1: 'value1', propname2: 'value2'});

次のように機能します。

$('.some-element').transition({ x: '40px', y: '40px' });

そして、次のようにプロパティ値に変数を使用できます (これは機能します)。

var xVal = '40px',
    yVal = '40px';
$('.some-element').transition({ x: xVal, y: yVal });

しかし、次のように変数を介して変換の「タイプ」を指定できるようにする必要があります(これは機能しません):

<div class="some-element" data-ca-type1="x" data-ca-type2="y"></div>

var xVal = '40px',
    yVal = '40px',
    target = $('.some-element'),
    type1 = target.data('caType1'),
    type2 = target.data('caType2');
target.transition({ type1: xVal, type2: yVal });
4

3 に答える 3

0

オブジェクト リテラルでは、プロパティ名は常にリテラルです。計算されたプロパティ名を持つプロパティを作成するには、配列構文を使用する必要があります。

var x_val = '40px',
    y_val = '40px',
    target = $('.some-element'),
    type1 = target.data('caType1'),
    type2 = target.data('caType2'),
    options = {};
options[type1] = x_val;
options[type2] = y_val;
target.transition(options);
于 2013-11-11T15:31:45.107 に答える
0

最初に空のオブジェクト (または非動的キーを持つオブジェクト) を作成してから、角括弧表記を使用して動的キーの値を設定する必要があります。このようなもの：

var xVal = '40px',
    yVal = '40px',
    target = $('.some-element'),
    type1 = target.data(caType1),
    type2 = target.data(caType2);
var options = {}
options[type1] = xVal;
options[type2] = yVal;
target.transition(options);

オブジェクト リテラル構文を使用してオブジェクトを作成する場合、キーは常に文字列値として扱われます。はまたは{x: 0}と同等であるため、変数がある場合でも、JavaScript エンジンは、文字列ではなくの値をキーとして使用することになっていることを知りません。{"x": 0}{'x': 0}xx"x"

于 2013-11-11T15:31:55.087 に答える
0

配列およびオブジェクトで使用[]して、動的プロパティ値を設定できます。

transitionData = {};
transitionData[type1] = xVal;
transitionData[type2] = yVal;
target.transition(transitionData);

私はこれらの種類のものをインライン化することを好む傾向があります。これは、匿名関数をインスタンス化することで実行できます。

target.transition(new function () {
    this[type1] = xVal;
    this[type2] = yVal;
}());

一般的には、トランジション データ[data-*]を JSON として属性に直接保持し、jQuery の自動解析を利用し.data()ます。

HTML: 
<div data-ca='{"x":"40px","y":"40px"}'></div>
JS: 
$('[data-ca]').each(function () {
    $(this).transition($(this).data('ca'));
});
于 2013-11-11T15:32:24.840 に答える