Могу ли я объявить переменную, используя значение атрибута данных элемента?

Question

Могу ли я объявить переменную, используя значение атрибута данных элемента?

0

Я создаю объект, где ключ будет строкой, а значение будет массивом значений.

Вот то, что я смотрю на строительство...

myObject = { BAR = ['values', 'values'], BAR_2 = ['values', 'values'] }

Поэтому я зацикливаюсь на создании массивов "BAR". Я хочу использовать атрибут data, который передается в функцию.

Поэтому допустим это в HTML:

<a href="#" data-foo="BAR">x</a>

Я хочу сделать это:

$(this).data('foo') = [];

поэтому у меня есть новый массив под названием BAR[] который затем можно вставлять значения.

clint_milner 05 май 2014, в 21:53

Источник

Теги:

javascript

jquery

html

custom-data-attribute

5 ответов

2

Вы можете сделать это только как свойство большего объекта или массива.

Так что если

var store = {};

тогда ты можешь

store[$(this).data('foo')] = [];

если вы хотите, вы также можете использовать this объект для хранения своего var, хотя в вашем случае не имеет смысла делать это так, потому что я предполагаю, что ваш код находится внутри какого-либо обработчика событий jquery.

this[$(this).data('foo')] = [];

dezman 05 май 2014, в 17:00

1

Почему бы не использовать extend()? Кажется, что вам нужно.

HTML

<a href="#" data-foo="BAR_1">x</a>
<a href="#" data-foo="BAR_2">x</a>
<a href="#" data-foo="BAR_3">x</a>

JS

var my_object = {};
var $link = $('a');

$.each($link, function() {
    var $this = $(this);
    var key = $this.data('foo');
    $.extend(my_object, my_object[key] = []);
});

console.log(my_object);

Пример jsfiddle: http://jsfiddle.net/YK6bH/ (проверьте браузер console.log)

docs: http://api.jquery.com/jquery.extend/

lesssugar 05 май 2014, в 21:35

0

Вы также можете использовать функцию javascript eval(). например:

x = 'hello';
eval('var '+x+'="world"');
//the variable hello is now equal to the string "world"

plammann 05 май 2014, в 18:22

0

Трудно сказать, каковы ваши ожидаемые результаты и поведение, поэтому здесь мой удар. http://jsfiddle.net/y6a8H/

bar: <input type="text" data-foo="bar" /><br />
bar: <input type="text" data-foo="bar" /><br />
bar_2: <input type="text" data-foo="bar_2" /><br />
bar_2: <input type="text" data-foo="bar_2" /><br />
bar_2: <input type="text" data-foo="bar_2" /><br />
bar_3: <input type="text" data-foo="bar_3" />

$('[data-foo]').on('blur',function(){
    var vals = {};
    $('[data-foo]').each(function(i,e) {
        var data_foo = $(e).data('foo');
        vals[data_foo] = vals[data_foo] || [];
        vals[data_foo].push($(e).val());
    });
    console.log(vals);
})

Когда изменяется вход, я строю объект и регистрирую его. Таким образом, этот ввод будет отображаться

{"bar":["a","b"],"bar_2":["c","d","e"],"bar_3":["f"]}

Joe Frambach 05 май 2014, в 18:14

Ещё вопросы

clint_milner · Accepted Answer · 2014-05-05T21-41-00.000Z

Я закончил использование объекта window, чтобы ссылаться на атрибуты данных таким образом, а не на eval. Я думаю, что мы справляемся с привязкой к событиям, из-за чего устраняются другие решения.

<a href="#" data-foo="BAR">x</a>

// set key to the  BAR[] array
   var key = window[ $this.data( 'foo' ) ];

// push value into BAR[]
   key.push( $this.data( 'values' ) );

// push the BAR['values'] array into the myObject object
   myObject[$this.data( 'foo' )] = key;

ВЫВОД:

myObject = { BAR = ['values', 'values'], BAR_2 = ['values', 'values'] }