Hey guys, i need your help.

This is what i want to do , i got this progress bar and i would like when i click the (link) to change the attribute of number (80) to 100:

data-pro-bar-percent="80" --> data-pro-bar-percent="100"

This is the code:

<a class="button" href="#">Click Link</a>

    <div class="pro-bar-container color-green-sea">

                    <div class="pro-bar bar-100 color-turquoise" data-pro-bar-percent="30" data-pro-bar-delay="4000">

                        <div class="pro-bar-candy candy-ltr"></div>

                    </div>

                </div>

First off a good practice with classes that are used for JavaScript hooks is to prefix them with a class of .js- that way anybody (or yourself at a future date) when reading through the DOM knows that this class is a JavaScript hook and not used for styling. That said if this item is unique then you should use an ID as the hook as ID's take less time to look up and locate than a class.

 

Assuming you're going to go with the class selector this will work:

 

$('.js-button').on('click', function(){
   $(this).find('.js-pro-bar').data(100);
});

in JavaScript anonymous event functions the 'this' keyword represents the object that the event was called upon, which in this case was the $('.js-button') object.

 

The code in the post above by NOCK will work. However, unfortunately if you happen to have any other item the the same classname it too will have it's data-attribute updated, using the 'this' keyword ensures only the object that was clicked (or in this case it's appropriate child objects) get the attribute update, on smaller projects this doesn't tend to matter too much, but it's good practice to follow especially if the project might grow.

 

I have updated the HTML below with the .js- prefixed hooks. One thing you should avoid which I see in your classnames is giving the exact color of how it appears, while it's a good idea to have classnames that are abstract from the content and instead describes the form which you do, I'd go with having classnames like brand-color, alpha-color, beta-color and so on. Because you never know if the client suddenly wants all the turquoise colors to become orange, then your classname is confusing.

<a class="button js-button" href="#">Click Link</a>
    <div class="pro-bar-container color-green-sea">
                    <div class="js-pro-bar pro-bar bar-100 color-turquoise" data-pro-bar-percent="30" data-pro-bar-delay="4000">
                        <div class="pro-bar-candy candy-ltr"></div>
                    </div>
                </div>

Edited June 20, 201412 yr by rbrtsmith

@@rbrtsmith , While I agree in general with what you're saying, in this case your code would not work.

.pro-bar is not a descendent of .button so will not be found.

Your use of the data function is incorrect, to change an existing Jquery data value you would need to use

$( element ).data( key, value )

However you need to be careful, this does not change the data-attr of the element, it only changes what data is stored internally by Jquery (two different things).

Here's an example to demonstrate

 

http://jsfiddle.net/3QcKc/

Yes you are right. The two should be put in some kind of wrapper then you could use $(this).parent().find('.js-data-pro-bar').data('pro-bar-percent', 100);

My post above is what happens when you just blindly write js and forget to test