Get function parameter from data attribute

Question

I am trying to get a parameter of a function from a data attribute, like there is a function which accept parameters:

$(element).transition({
    x:'100%',
    opacity: '0.5'
});

and I wan to get transition parameters from a data attribute, like:

<div class="have-data" data-transition="x:'100%',opacity: '0.5'">
    ....
</div>

Now i want to get parameters from data attribute and set it .transition() parameter to like:

.transition($('.have-data').data('transition'))

Olegas · Accepted Answer · 2013-08-12 10:22:34Z

3

Try the following attribute value

<div class="have-data" data-transition='{"x":"100%","opacity": "0.5"}'>
    ....
</div>

And use

.transition($('.have-data').data('transition'))

jQuery is smart and automagically converts your data from JSON to plain JS object. But note, you must use " instead of ' for quoting field names of your config-object

edited Aug 12, 2013 at 10:22

answered Aug 12, 2013 at 10:16

Olegas

10.5k8 gold badges55 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user007 Over a year ago

Please note: I am creating my data attributes using attr,

user007 Over a year ago

I am having problem, As I am creating data attribute using attr I cant use ', $(elem).attr('data-transition', input.value) I am using attr cause I am saving HTML to database. Any suggestion please

user007 Over a year ago

I will use this in data attribute: x:100%|opacity:0.5 and later I will use .replace(). Done

Rory McCrossan Over a year ago

@user007 why are you using attr() to create data attributes? Use data() as that's what it was intended for.

user007 Over a year ago

Already told, if I create data using data() then it will not visible in DOM, so if you save HTML you will not get data

|

Collectives™ on Stack Overflow

Get function parameter from data attribute

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related