使用jQuery在Javascript事件处理程序中保持此数据的最佳方法是什么

时间:2021-08-15 16:09:42

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.

我的代码用于替换带有动态按钮的单选按钮,并允许单击标签和新动态无线电元素以切换隐藏状态与CSS单选框。

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.

我需要发送questions.checkAnswer()三个参数,这些参数在这些启动循环中定义。但是,一旦循环完成迭代,我总是得到最后的值。在过去,我创建了虚拟元素和其他不适合存储“临时”贵重物品的东西,以充当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">
  • 用Javascript添加假装属性是不好的,例如,

  • Should I store information in the rel attribute and concatenate it with an hyphen for example, and explode it when I need it?
  • 我应该将信息存储在rel属性中,并将其与连字符连接起来,并在需要时将其展开?

  • How have you solved this problem?
  • 你是怎么解决这个问题的?

  • I am open to any ideas to make my Javascript code better.
  • 我愿意接受任何想法,以使我的Javascript代码更好。

Thank you all for your time.

谢谢大家的时间。

3 个解决方案

#1


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

你需要说'var questionIndex'等,否则你的'变量'是窗口的属性并具有全局范围......

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.

关于自定义属性,我在过去肯定已经做到了,如果可以的话,我会尽量避免它。如果你使用像textareas和输入标签这样的交互式元素来执行此操作,某些CMS和主题系统偶尔会感到不快,并且可能会将它们剥离出来。

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.

最后$(a,b)与$(b).find(a)相同..有些人更喜欢第二种形式,因为它更清楚你在做什么。

#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.

添加自定义属性不是世界末日。事实上,在许多情况下,这是最不好的方法。但是,如果我必须这样做,我会在属性前加上“data-”,以便它符合HTML5规范的自定义属性以实现向前兼容性。这样,当您想要符合HTML5时,您不必担心升级。

#3


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

如果自定义属性的分配完全是客户端的,则必须使用jQuery数据解决此问题,如下所示:

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

$(“#yourLiID”)。data({module:1,question:0,answer:6});

for the full documentation see here

有关完整文档,请参见此处

#1


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

你需要说'var questionIndex'等,否则你的'变量'是窗口的属性并具有全局范围......

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.

关于自定义属性,我在过去肯定已经做到了,如果可以的话,我会尽量避免它。如果你使用像textareas和输入标签这样的交互式元素来执行此操作,某些CMS和主题系统偶尔会感到不快,并且可能会将它们剥离出来。

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.

最后$(a,b)与$(b).find(a)相同..有些人更喜欢第二种形式,因为它更清楚你在做什么。

#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.

添加自定义属性不是世界末日。事实上,在许多情况下,这是最不好的方法。但是,如果我必须这样做,我会在属性前加上“data-”,以便它符合HTML5规范的自定义属性以实现向前兼容性。这样,当您想要符合HTML5时,您不必担心升级。

#3


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

如果自定义属性的分配完全是客户端的,则必须使用jQuery数据解决此问题,如下所示:

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

$(“#yourLiID”)。data({module:1,question:0,answer:6});

for the full documentation see here

有关完整文档,请参见此处