Javascript 优化代码以仅定义一次变量，代码仅在变量位于change函数中时有效，并且对于我重新定义的change之外的代码有效？

我很确定我知道解决方案。。。将写入.on（'change'，'load'，function（）{} 正确吗？ 应该是

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

.on('change load',

您可以删除单独写出的一个，并将其包含在一个函数中（如果类的多个实例切换bg）

或者只触发更改事件。（如果类只有一个实例）

这将在页面加载时运行相同的功能

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

---

要做到这一点，可以在change事件处理程序中使用该函数，并在最后链接一个

触发器（'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

要么是

moon2

，这意味着检查其中一个按钮就足够了。

这很有效，而且比我的要干净得多，我肯定在这里学到了一些东西，我仍然需要不断地查看一些部分才能完全理解，但在键入时，我看到了它的星星ting想让senseI喜欢一组变量是如何定义的，只有一个变量实例，每个变量之间用逗号分隔。我肯定会再次使用它…我看到变量切换可以在函数内部使用，只要它是触发元素（认为这是正确的术语），但我不明白为什么。change（）；在最后使用..我已经看到过很多次..重新阅读（这将在页面加载时运行相同的功能。）这意味着有必要在加载时运行函数，我非常确定！有趣的是，在jQuery中有很多方法可以编写相同的东西，我非常喜欢这个解决方案，它的代码更少，工作也很好。这对我来说有点新，我认为将这段代码与Sushanth的代码混合使用可以编写出一个非常流畅的函数。…进行测试，效果非常好…非常轻量级，我喜欢并需要开发这种实践..我的jQuery代码完成了任务，但可能会很草率和沉重..谢谢，你正在帮助我成为一名更好的程序员..我很感激，希望你在编写解决方案时玩得开心！我使用了这段代码，因为它更干净，我们消除了if-else语句并在一个实例中写入颜色变化，也不是在两个实例中写入幻灯片向上/向下，而是在.slideToggle回调中写入…在这里肯定学到了一些东西…希望它能帮助其他人！实际上我发现我需要将if/else语句与这两个（moon1）（moon2）一起使用…因为如果切换开关关闭，我想显示滑块区域…通过切换，无论发生什么情况，它总是关闭的…是的，我想我会尝试做一些类似于您编写颜色的事情，但不想摆弄它…这会导致语法错误，括号不太好。。

.on('change load',

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

$('.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');