javascript - 优化代码仅定义一次变量，代码仅在变量处于更改功能时才起作用，而对于更改之外的代码我重新定义？

Question

很确定我知道解决方案...会写 .on('change','load', function(){}正确吗？ <-- 测试无效？所以我接受你的解决方案:)

Sushanth -- && adeneo 都提出了很好的解决方案，这是优化代码的一个很好的教训......很难选择要使用的答案，但我知道这会对我有所帮助重新思考我的写作方式...我不知道没有这个论坛我该怎么办，我必须在大学里学习这些东西。

这纯粹是出于好奇和提高我的技能而提出的问题，同时也给你们一个机会来展示你们在 jQuery 方面的知识。也为了防止任何草率的写作。

我有一个基于 radio 的开关盒，标记如下所示，id 和开/关值由我的数组中的值使用 PHP 生成...

            <span class="toggle-bg">//This color is the background of the toggle, I need jQuery to change this color based on the state on/off
              <input type="radio" value="on" id="_moon_page_header_area1" name="_moon_page_header_area">//this is my on value generated by the array
              <input type="hidden" value="_moon_page_header_area" class="switch-id-value">// I create this input because I have multiple checkboxes that have the ID _moon_ARRAYVALUE_area1           
              <input type="radio" value="off" id="_moon_page_header_area2" name="_moon_page_header_area">// off value
              <input type="hidden" value="_moon_page_header_area" class="switch-id-value">//_moon_ARRAYVALUE_area2 
               <span class="switch"></span>// the switch button that changes
            </span>

希望这是有道理的并且评论是清楚的

这是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()
}
}); 

它看起来比实际长，它只是 self 重复，一个正在加载以便它在页面加载时提供正确的颜色，然后在更改函数中我们需要更改颜色..

我该如何编写它以便我只需要使用一次变量(因此它更干净)是否有更好的方法来优化它......写完之后我现在想我可以把它放在一个函数中.on('加载”、“更改”、函数 () {}

我刚刚才想到这个，但我写下了所有这些，所以我要看看其他人是怎么想的......

Answer 1

你可以通过在 change 事件处理程序中使用该函数来做到这一点，最后你链接一个 trigger('change') 以使其在页面加载时工作:

$('.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 或 moon2，这意味着选中其中一个就足够了。