jQuery的光開關設置起始狀態

Question

我使用這個設置顯示，如果燈打開或關閉：

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

如何選擇至極開關狀態開始？

截至目前我有一個lightvalue在我的數據庫，0 =關閉1 =。我使用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/

Answer 2

我不是很好用PHP，但給div.cube開關類「活躍」，如果它的上，和刪除內聯透明度樣式的（整潔達通過各種手段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>