javascript - jquery灯开关设置起始状态

Question

我正在使用此设置来显示灯是打开还是关闭:

http://www.jquery2dotnet.com/2012/11/jquery-light-switch-on-off-using-css3.html

我如何选择要启动的开关状态？

截至目前，我的数据库中有一个光值，1 = 打开 0 = 关闭。我使用 sql 检索此值并加载适当的灯泡。

但是我该如何使用开关呢？我没有 switch1 和 switch2，所以我可以根据 lightvalue 加载我想要的。

代码如下:

light.js

var lightVal = document.getElementById("light-bulb2");

    function getLightValue(r) {
        var lightValue;
        $.ajax({
            url: 'Database/checklight.php',
            type: "POST",
            data: {room: r},
            success: function(data) {
                data1 = JSON.parse(data);
                $.each(data1, function(key, val) {
                    lightValue = val.light;
                    lightVal.style.opacity = lightValue;
                });

            },
            async: false
        });


    }

    function updateLight(val, rom) {
        $.ajax({
            url: 'Database/updateLight.php',
            type: "POST",
            data: {light: val, room: room},
            success: function(data) {
                data2 = JSON.parse(data);
                if (data2 < 1) {
                    alert("Not Updated");
                }
            },
            async: false

        });
    }

    light.php

    <div id="temptre">
                    <div id="light-bulb" class="off ui-draggable" >
                        <div id="light-bulb2" style="opacity: 0">
                            <script src="JS/light.js">
                            </script>
                        </div></div>
                    <div class="cube-switch">
                        <span class="switch">
                            <span class="switch-state off">Off</span>
                            <span class="switch-state on">On</span>
                        </span>
                    </div>               
                </div>



                <script>

                    getLightValue(<?php echo $_SESSION['sess_room']; ?>);

                    $('.cube-switch .switch').click(function() {
                        if ($('.cube-switch').hasClass('active')) {
                            $('.cube-switch').removeClass('active');
                            $('#light-bulb2').css({'opacity': '0'});
                            updateLight(0, <?php echo $_SESSION['sess_room']; ?>);

                        } else {
                            $('.cube-switch').addClass('active');
                            $('#light-bulb2').css({'opacity': '1'});
                            updateLight(1, <?php echo $_SESSION['sess_room']; ?>);
                        }
                    });

                </script>

Answer 1

如果你想让开关工作，那么你需要触发click事件，这样它就可以开关(基于值)。

// call(trigger) click event on success
function updateLight(val, rom) {
    $.ajax({
        url: 'Database/updateLight.php',
        type: "POST",
        data: {
            light: val,
            room: room
        },
        success: function (data) {
            data2 = JSON.parse(data);
            if (data == 1) {
                $('.cube-switch .switch').trigger('click', [{
                    forceStart: true
                }]);
            } else {
                $('.cube-switch .switch').trigger('click', [{
                    forceStart: false
                }]);
            }
        },
        async: false

    });
}


// change your click event to handle the passed argument
$('.cube-switch .switch').click(function (e, data) {
    if (typeof data !== 'undefined') {
        if (data.forceStart) {
            // remove the active class, so that it can add the active class later to match switch on
            $('.cube-switch').removeClass('active');
        } else {
            $('.cube-switch').addClass('active')
        }
    }
    if ($('.cube-switch').hasClass('active')) {
        $('.cube-switch').removeClass('active');
        $('#light-bulb2').css({
            'opacity': '0'
        });
        updateLight(0, <? php echo $_SESSION['sess_room']; ?> );

    } else {
        $('.cube-switch').addClass('active');
        $('#light-bulb2').css({
            'opacity': '1'
        });
        updateLight(1, <? php echo $_SESSION['sess_room']; ?> );
    }
});

JSFIDDLE:http://jsfiddle.net/4rkQZ/152/