1

很确定我知道解决方案...会写 .on('change','load', function(){} 正确吗？ <-- 测试没有用？所以我取决于你的解决方案:)

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

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

我有一个基于收音机的开关盒，标记看起来像这样，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()
}
});

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

我该如何编写它，所以我只需要使用一次变量（所以它更干净）有没有更好的方法来优化它......现在想在写完这个之后我可以把它放在一个函数中 .on('load', '改变'，函数（）{}

我刚才想到了，但是我写了所有这些，所以我要去看看别人的想法......

4

2 回答 2

1 
.on('change','load',

应该是

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

.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();
于 2013-07-08T23:32:46.537 回答
1

您可以通过在更改事件处理程序中使用该函数来做到这一点，最后您链接 atrigger('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');

由于不能取消选中单选按钮，它是moon1or moon2，这意味着选中其中一个就足够了。

于 2013-07-08T23:36:06.333 回答