Jquery灯光开关设置启动状态

Jquery light switch setting starting state

本文关键字:启动 状态 设置 开关 Jquery      更新时间:2023-09-26

我使用这个设置来显示灯是打开还是关闭:

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

我如何选择哪个开关状态启动?

到目前为止,我在数据库中有一个lightvalue, 1 = on 0 = off。我使用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>

如果你想让开关工作,那么你需要触发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/

我不是很擅长php,但给div.cube-switch一个'active'类,如果它是on的,并删除内联不透明度样式(整理php的一切手段!)

<div href="" class="cube-switch <?php if ($on) { echo ' active'; } ?>">
    <span class="switch">
        <span class="switch-state off">Off</span>
        <span class="switch-state on">On</span>
    </span>
</div>
<div id="light-bulb" class="off ui-draggable">
    <div id="light-bulb2" <?php if (!$on) { echo 'style="opacity:0"'; } ?>></div>
</div>