Используя переменную для имени свойства объекта в массиве?

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 });
  • 5
    ПРИМЕЧАНИЕ: var x-val является синтаксической ошибкой, вы не можете иметь - в имени переменной.
  • 3
    class=".some-element" должен быть class="some-element" чтобы вы могли выбрать его с помощью .
Показать ещё 2 комментария
Теги:
arrays
properties

3 ответа

0
Лучший ответ

Вы можете использовать [] для массивов и объектов для установки значений динамических свойств.

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

Я предпочитаю встраивать такие вещи, которые можно сделать, создавая анонимную функцию:

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

Хотя обычно я бы просто сохранил данные о переходе непосредственно в [data-*] как JSON, воспользовавшись автоматическим [data-*] jQuery с .data():

HTML:
<div data-ca='{"x":"40px","y":"40px"}'></div>
JS:
$('[data-ca]').each(function () {
    $(this).transition($(this).data('ca'));
});
Поделиться
  • 0
    Это был самый простой способ, спасибо! О, чувак, я знал, что должен был спросить раньше ... сэкономил бы мне кучу времени =)
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);
Поделиться
  • 0
    так же, как Энтони, просто нужно добавить кавычки вокруг реквизита данных, спасибо
  • 0
    @ user1157601 Нечестно, вы изменили вопрос после того, как я опубликовал свой ответ.
Показать ещё 2 комментария
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} эквивалентно {"x": 0} или {'x': 0}, поэтому, даже если у вас есть переменная x движок JavaScript не знает, что он должен использовать значение x а не строка "x" в качестве ключа.

Поделиться
  • 0
    да, то же самое, без ошибок, когда я добавляю '' вокруг target.data ('caType1'); но по-прежнему не применяется анимация
  • 0
    неважно, это работает ... как только опечатки исправлены - jsfiddle.net/VpC8t/1 thx

Ещё вопросы

Сообщество Overcoder
Наверх
Меню