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

我对PHP不是很好，但给div.cube-switch一类“活跃”的＃如果它打开，并删除内联不透明样式（一定要整理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>

Answer 2

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

Jquery灯开关设置启动状态

2 个答案: