CODEWITHSUNDEEP
javascriptjquery
alex
alex

Reputation: 490203

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

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});

                });



            });


       });

Thank you all for your time.

Upvotes: 0

Views: 178

Answers (3)

tanathos
tanathos

Reputation: 5606

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

Upvotes: 1

Rakesh Pai
Rakesh Pai

Reputation: 26277

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.

Upvotes: 2

Scott Evernden
Scott Evernden

Reputation: 39926

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.

Upvotes: 1

Related Questions