我无法使用HTML网站更改Firebase项目的状态数据，并使用javascript（.js）连接我的Firebase项目。我已设置复选框以更改Firebase上的状态数据。但它无法更改Firebase上的数据值。我已经更改了ID复选框，但没有结果。有人请帮助我。我是新手。这是我的HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description">
<meta name="author">
<title>
Web Kontrol
</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <link href="assets/css/style.css" rel="stylesheet"> -->
<link href="assets/css/sh-default.css" rel="stylesheet" default-stylesheet="true" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body style="cursor: auto;">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a class="navbar-brand" href>Web Kontrol Lampu</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>
<a data-target="#login" href>Login</a>
</li>
<!--<li>
<a data-target="#register" href>Signup</a>
</li>-->
<li>
<a data-target="#lists" href>Control</a>
</li>
<li>
<a id="logout" href>Logout</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="welcome"></div>
<div class="container tab default" id="login">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">
<em class="stackhive-marker"></em>Login to Your Account
</h2>
<hr>
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="login-email"><input type="password" class="form-control" placeholder="Password"
required="" id="login-password">
<button class="btn btn-primary" type="button" id="login-btn">
Login
</button>
<hr>
<div class="status alert alert-info hide"></div>
</form>
</div>
<div class="container tab hide" id="register">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">
Daftar Akun Baru
</h2>
<hr>
<input type="text" class="form-control" placeholder="Your Name" required="" autofocus="" id="name"><input type="email" class="form-control" placeholder="Email address" required=""
autofocus="" id="email"><input type="password" class="form-control" placeholder="Password" required="" id="password">
<button class="btn btn-primary" type="button" id="signup-btn">
Masuk !
</button>
</form>
<hr>
<div class="status alert alert-info hide"></div>
</div>
<div class="container tab hide" id="lists">
<div class="status alert alert-info hide"></div><br>
<h1>Kontrol Lampu</h1>
<div align="center">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round-1" type="checkbox">
<input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round-2" type="checkbox">
</div><!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="./firebasefunctions.js"></script>
<script type="text/javascript" src="./script.js"></script>
<!-- <script type="text/javascript" src="./script-coba.js"></script> -->
</body>
这个.js文件
$(document).ready(function() {
//this URL to my FIrebase project
var ref = new Firebase("https://firesmartlamp.firebaseio.com/devices/smartlamp/parameters/");
/*****************************************************************
Get the status on Firebase
******************************************************************/
ref.once("value", function(res) {
var status = res.child("state").val(); //state is my data on Firebase
$('#cmn-toggle-1').attr('checked', status); //cmn-toggle-1 is my checkbox id
console.log("Statusnya: " +status)
});
ref.once("value", function(res) {
var status2 = res.child("state2").val();
$('#cmn-toggle-2').attr('checked', status);
console.log("Statusnya: " +status2)
});
/*****************************************************************
Sync to firebase
******************************************************************/
ref.on("child_changed", function(res) {
var states = res.val();
$('#cmn-toggle-1').prop('checked', states);
console.log("Cek: " +states)
});
ref.on("child_changed", function(res) {
var states2 = res.val();
$('#cmn-toggle-2').prop('checked', states2);
console.log("Cek: " +states2)
});
/*****************************************************************
Update value, changed status of Switch
******************************************************************/
$('#cmn-toggle-1').on('change', function(){
if(this.checked)
{
console.log("On")
ref.update({ state: true }); //true and false are value of data on Firebase
}
else{
console.log("Off")
ref.update({ state: false });
}
});
$('#cmn-toggle-2').on('change', function(){
if(this.checked)
{
console.log("On")
ref.update({ state2: true });
}
else{
console.log("Off")
ref.update({ state2: false });
}
});
});
答案 0 :(得分：0)
您正在混合各种数据访问模式，因此我在jsbin中清理了这些模式并使其正常运行。 Firebase的阅读现在只是：
/*****************************************************************
Sync with firebase
******************************************************************/
ref.child("state").on("value", function(res) {
var states = res.val();
$('#cmn-toggle-1').prop('checked', states);
});
ref.child("state2").on("value", function(res) {
var states2 = res.val();
$('#cmn-toggle-2').prop('checked', states2);
});
所以我们有两个状态属性（state和state2）并为每个属性附加一个值监听器。这意味着将使用当前值“立即”调用回调，然后在属性更改时调用一次。