优化代码只定义变量一次,代码仅在变量处于变更函数时才起作用,而变更外部的代码重新定义?

很确定我知道解决方案…会写.on(’更改’,’加载’,函数(){}正确吗? < – 测试不起作用?所以我能够解决你的问题:)

Sushanth – && adeneo都提出了很好的解决方案,这是优化代码的一个很好的教训…选择哪个答案很难,但我知道这会帮助我重新思考我的写作方式。如果没有这个论坛,我不知道我做了什么,我必须在大学里学习这些东西。

这纯粹是出于好奇心和提高我的技能的问题,也是让你们有机会展示你对jQuery的知识。 还要防止任何草率的写作。

我有一个基于无线电的开关盒,标记看起来像这样,id和开/关值是由我的数组中的值与PHP生成的…

//This color is the background of the toggle, I need jQuery to change this color based on the state on/off //this is my on value generated by the array // I create this input because I have multiple checkboxes that have the ID _moon_ARRAYVALUE_area1 // off value //_moon_ARRAYVALUE_area2 // the switch button that changes  

希望有意义,评论很清楚

这是jQuery

  var value = $('.toggle-bg input.switch-id-value').val() var moon1 = $('#'+value+'1').is(':checked'); var moon2 = $('#'+value+'2').is(':checked'); var static_slide = $('._moon_staticarea_height'); var toggle = $('.toggle-bg'); if(moon1){ toggle.css({'background-color': '#46b692'}); static_slide.hide() } else if (moon2){ toggle.css({'background-color': '#333'}); static_slide.show() } $('.toggle-bg').change(function () { var value = $('.toggle-bg input.switch-id-value').val() var moon1 = $('#'+value+'1').is(':checked'); var moon2 = $('#'+value+'2').is(':checked'); var static_slide = $('._moon_staticarea_height'); var toggle = $('.toggle-bg'); if(moon1){ toggle.css({'background-color': '#46b692'}); static_slide.slideUp() } else if (moon2){ toggle.css({'background-color': '#333'}); static_slide.slideDown() } }); 

它看起来比它实际上更长,它只是重复它自己,一个是在加载,以便它在页面的加载时给出正确的颜色,然后在更改function内部我们需要更改颜色..

我怎么写它所以我只需要一次使用变量(所以它更干净)有更好的方法来优化它…现在正在思考写这个之后我可以把它放在一个函数中.on(’load’, ‘change’,function(){}

我刚才想到了这一点,但我写了所有这些,所以我会看到其他人的想法……

你可以通过在更改事件处理程序中使用该函数来实现这一点,并在结束时链接trigger('change')以使其在pageload上工作:

 $('.toggle-bg').on('change', function () { var value = $('.toggle-bg input.switch-id-value').val(), moon1 = $('#' + value + '1').is(':checked'), slider = $('._moon_staticarea_height'), toggle = $('.toggle-bg'); toggle.css('background-color', (moon1 ? '#46b692' : '#333')); slider[moon1?'slideUp':'slideDown'](); }).trigger('change'); 

由于无法取消选中moon1按钮,它可能是moon1moon2 ,这意味着检查其中一个就足够了。

 .on('change','load', 

应该是

//如果要将同一个处理程序绑定到多个事件,请删除逗号分隔符。

 .on('change load', 

并且您可以删除单独写出的那个并将其括在一个函数中(如果类的多个实例toggle-bg)

或者只是触发更改事件。(如果有一个类的实例)

这将在页面加载时运行相同的function。

 var toggle = $('.toggle-bg'); toggle.change(function () { var value = $('input.switch-id-value', this).val(), moon1 = $('#' + value + '1').is(':checked'), moon2 = $('#' + value + '2').is(':checked'), static_slide = $('._moon_staticarea_height'); if (moon1) { toggle.css({ 'background-color': '#46b692' }); static_slide.slideUp() } else if (moon2) { toggle.css({ 'background-color': '#333' }); static_slide.slideDown() } }).change();