jquery plugin object configuration with .data()

Question

Its probably stupid noob general javascript question but ive been trying to find an answer for days.

Lets say i use jquery plugin that takes object as settings (i will show on flexbox called fluixbox) and i want it to take some of the settings from html.

html:

<a data-color="rgba(40,25,255,1)"> My colorful image </a>

javascript:

$("a").fluidbox({ overlayColor:   $(this).data("color") })

I think its pretty self explenatory, i tried to do everything. I think problem must be something with scope. If i just create function that returns rgba(40,25,255,1) and put it instead $(this).data("color") then it does work.

Thank you for any response.

it is scope, the use of this within the attribute is not referring to a, but defaults to the global window object. you need to assign the color to a variable, then use that variable as the value instead. — PlantTheIdea
– PlantTheIdea, Commented Apr 3, 2014 at 14:43

Buzinas · Accepted Answer · 2014-04-03 14:47:28Z

2

When you use $(this) in that scope, you're not referring to your anchor, you're probably referring to the Window object.

You can use:

$("a").each(function() {
    $(this).fluidbox({ overlayColor: $(this).data("color") });
});

This should work, since the function inside the "each" method changes the scope to each DOMElement you're iterating.

answered Apr 3, 2014 at 14:47

Buzinas

11.8k2 gold badges38 silver badges59 bronze badges

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

1 Comment

Krisa Over a year ago

Thank you! This works however because of your solution i found out that i tried the same thing before and dumped it. It turns out that that particual plugin Fluidbox changes options to a class that it applies globaly so the option is just rewritten everytime and latest rewrite is basicaly applied to everything. I will have to change the approach. Anyway this answer pushed me forwad and IS the solution to my question. Thank you very much.

Collectives™ on Stack Overflow

jquery plugin object configuration with .data()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related