Javascript Jquery灯开关设置启动状态

我使用此设置来显示灯光是打开还是关闭：

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

到目前为止，我的数据库中有一个lightvalue，1=开0=关。我使用sql检索该值并加载相应的灯泡

但是我怎么用开关呢？我没有开关1和开关2，所以我可以根据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>

light.js
var lightVal=document.getElementById（“light-bulb2”）；
函数getLightValue（r）{
var值；
$.ajax({
url:'Database/checklight.php'，
类型：“POST”，
数据：{room:r}，
成功：功能（数据）{
data1=JSON.parse（数据）；
$。每个（数据1，函数（键，val）{
lightValue=val.light；
lightVal.style.opacity=lightValue；
});
},
异步：false
});
}
函数更新灯（val、rom）{
$.ajax({
url:'Database/updateLight.php'，
类型：“POST”，
数据：{light:val，room:room}，
成功：功能（数据）{
data2=JSON.parse（数据）；
如果（数据2<1）{
警报（“未更新”）；
}
},
异步：false
});
}
light.php
关
在…上
getLightValue（）；
$（'.cube-switch.switch'）。单击（函数（）{
if（$（'.cube开关'）.hasClass（'active'））{
$（'.cube-switch'）.removeClass（'active'）；
$（'#light-bulb2'）.css（{'opacity'：'0'}）；
updateLight（0，）；
}否则{
$（'.cube-switch'）.addClass（'active'）；
$（#light-bulb2'）.css（{'opacity'：'1'）；
更新灯（1，）；
}
});

我对php不是很在行，但是如果div.cube-switch处于启用状态，则为它提供一个“active”类，并删除内联不透明样式（请务必整理php！）

>

如果要使开关工作，则需要触发

单击事件，以便可以打开和关闭（基于值）

//成功调用（触发器）单击事件
函数更新灯（val、rom）{
$.ajax({
url:'Database/updateLight.php'，
类型：“POST”，
数据：{
灯光：瓦尔，
房间：房间
},
成功：功能（数据）{
data2=JSON.parse（数据）；
如果（数据==1）{
$（'.cube-switch.switch'）。触发器（'单击'[{
forceStart：对
}]);
}否则{
$（'.cube-switch.switch'）。触发器（'单击'[{
forceStart:false
}]);
}
},
异步：false
});
}
//更改click事件以处理传递的参数
$（'.cube-switch.switch'）。单击（函数（e，数据）{
if（数据类型！==‘未定义’）{
if（data.forceStart）{
//删除活动类，以便以后可以添加活动类以匹配打开的开关
$（'.cube-switch'）.removeClass（'active'）；
}否则{
$（'.cube-switch'）.addClass（'活动'）
}
}
if（$（'.cube开关'）.hasClass（'active'））{
$（'.cube-switch'）.removeClass（'active'）；
$（'#light-bulb2'）.css({
“不透明度”：“0”
});
updateLight（0，）；
}否则{
$（'.cube-switch'）.addClass（'active'）；
$（'#light-bulb2'）.css({
“不透明度”：“1”
});
更新灯（1，）；
}
});

JSFIDDLE：

<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>

// 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']; ?> );
    }
});