What's the best way to get this data to persist within Javascript event handlers using jQuery

Question

My code is meant to replace radio buttons with dynamic ones, and allow clicking both the label and new dynamic radio element to toggle the state of the hidden with CSS radio box.

I need to send to questions.checkAnswer() three parameters, and these are defined within these initiation loops. However I always get last the last values once the loop has finished iterating. In the past I've created dummy elements and other things that didn't feel right to store 'temporary' valuables to act as an informational hook for Javascript.

Here is what I have so far

init: function() {
        // set up handlers

       moduleIndex = $('input[name=module]').val();

       $('#questions-form ul').each(function() {

            questionIndex = $('fieldset').index($(this).parents('fieldset'));

            $('li', this).each(function() {

                answerIndex = $('li', $(this).parent()).index(this);

                prettyRadio = $('<span class="pretty-radio">' + (answerIndex + 1) + '</span>');

                radio = $('input[type=radio]', this);

                radio.after(prettyRadio);

                $(radio).bind('change', function() {
                    $('.pretty-radio', $(this).parent().parent()).removeClass('selected');

                    $(this).next('.pretty-radio').addClass('selected');

                    questions.checkAnswer(moduleIndex, questionIndex, answerIndex);

                });

                prettyRadio.bind('click', function() {

                    $('.pretty-radio', $(this).parent().parent()).removeClass('selected');

                    $(this).addClass('selected').prev('input').attr({checked: true});


                });

                $('label', this).bind('click', function() { 


                    $(radio).trigger('change');
                    questions.checkAnswer(moduleIndex, questionIndex, answerIndex);

                    $(this).prev('input').attr({checked: true});

                });



            });


       });

• Is it bad to add a pretend attribute with Javascript, example, <li module="1" question="0" answer="6">
• Should I store information in the rel attribute and concatenate it with an hyphen for example, and explode it when I need it?
• How have you solved this problem?
• I am open to any ideas to make my Javascript code better.

Thank you all for your time.

Answer 1

you need to say 'var questionIndex' etc, else your 'variables' are properties of the window and have global scope...

regarding custom attributes, i have certainly done that in the past tho i try to avoid it if i can. some CMS and theming systems occasionally get unhappy if you do this with interactive elements like textareas and input tags and might just strip them out.

finally $(a,b) is the same as $(b).find(a) .. some people prefer the second form because it is more explicit in what you are doing.

Answer 2

It's not the end of the world to add a custom attribute. In fact, in many cases, it's the least bad approach. However, if I had to do this, I would prefix the attribute the with "data-" just so that it is compliant with HTML5 specs for custom attributes for forward compatibility. This way, you won't have to worry about upgrading when you want to get HTML5 compliant.

Answer 3

If the assignment of the custom attributes is entirely client-side, you must resolve this with jQuery data, something like this:

$("#yourLiID").data({ module:1, question:0, answer:6 });

for the full documentation see here