长期读者，第一次发帖。 我目前正在做我的第一个家庭自动化项目，目前一切运行良好。 我遇到的问题如下。您将从下面的第一个代码中看到，我有许多具有不同值的提交按钮。这些值发送到 arduino，激活相应的 channel (通过 I2C)以打开/关闭继电器。
<?php include('inc.header.php'); ?>
<link rel="stylesheet" href="lcars.css">
<html>
<head>
<title>Pool/Alfresco</title>
<body style="background-color:powderblue;">
<form action="http://192.168.2.110/control" target="dummyframe" method="POST">
<h1 style="text-align:center;">Pool/Alfresco Controls</h1>
<div style="float:right;width:40%;">
<img src="img/pool1.gif"><img src="img/pool2.gif"><img src="img/pool3.gif"><img src="img/pool4.gif"><img src="img/pool5.gif"><img src="img/pool6.gif">
</div>
<div style="float:left;width:20%;">
<input class="lcarsbutton" style="color:#f90;height:5%;width:55%;" type="submit" name="On" value="11"> Spa Light
</div>
<br><br>
<div style="float:left;width:20%;">
<input class="lcarsbutton" style="color:#f90;height:5%;width:55%;" type="submit" name="On" value="12"> Pool Light
</div>
<br><br>
<div style="float:left;width:20%;">
<input class="lcarsbutton" style="color:#f90;height:5%;width:55%;" type="submit" name="On" value="13"> Tree Light
</div>
<br><br>
<div style="float:left;width:20%;">
<input class="lcarsbutton" style="color:#f90;height:5%;width:55%;" type="submit" name="On" value="14"> Fountains
</div>
<br><br>
<div style="float:left;width:20%;">
<input class="lcarsbutton" style="color:#f90;height:5%;width:55%;" type="submit" name="On" value="16"> Spa
</div>
<br><br>
<div style="float:left;width:20%;">
<input class="lcarsbutton" style="color:#f90;height:5%;width:55%;" type="submit" name="AllOff" value="0"> Disable All
</div>
</form>
<iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>
</body>
</html>
<?php include('inc.footer.php'); ?>
这是非常简单的代码，但我希望能够通过使用以下代码来实现相同的目的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pool Controls</title>
<link rel="stylesheet" href="style2.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').on('click', function(){
$(this).toggleClass('on');
});
});
</script>
</head>
<body>
<h1 style="text-align:center;color:red">Pool/Alfresco Controls</h1>
<section>
<a href="#" id="button"></a>
<span></span>
</section>
</body>
</html>
这段代码呈现了一个漂亮的“电源”按钮，可以在红色/绿色(关闭/打开状态)之间切换其下方的灯。所以基本上我需要能够将第一个代码中的值提交到arduino以打开/关闭 channel 。
我还不能发布图片，所以这里有一个链接来说明我的意思。
http://media02.hongkiat.com/css3-on-off-button/post-cover.jpg
任何帮助将不胜感激。提前致谢。
最佳答案
非常松散的例子。将 iID 添加到输入中，以便它们可以成为专门的目标和正确的标签...删除所有 <br />标签(这就是填充和边距的用途)，删除了内联样式。并使用您发布的图片一瘸一拐地走到一起。但这应该给你要点......
$(document).ready(function(){
$('.lcarsbutton').on('click', function(){
var thisValue = $(this).val(); //Gets value of button
$('h5 span').text(thisValue); //just to show the value
$(this).toggleClass('on');
});
});body { background: #1b1b1b; color: #fff; }
.lcarsbutton {
color:#f90;
height:115px;
width:90px;
margin: 10px;
background: url(http://media02.hongkiat.com/css3-on-off-button/post-cover.jpg) no-repeat -130px -115px;
border: none;
padding: 3px;
text-indent: -9999px;
outline: none;
}
.lcarsbutton:hover, .lcarsbutton.on {
background: url(http://media02.hongkiat.com/css3-on-off-button/post-cover.jpg) no-repeat -267px -115px;
padding: 3px;
outline: none;
}
h1, h5 { margin: 0 0 5px 0; padding:0; text-align: center; }
p { margin:0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://192.168.2.110/control" target="dummyframe" method="POST">
<h1>Pool/Alfresco Controls</h1>
<h5>Form value is: <span></span></h5>
<label for="btn11"><input class="lcarsbutton" type="submit" name="On" value="11" id="btn11" /> Spa Light</label>
<label for="btn12"><input class="lcarsbutton" type="submit" name="On" value="12" id="btn12" /> Pool Light</label>
<label for="btn13"><input class="lcarsbutton" type="submit" name="On" value="13" id="btn13" /> Tree Light</label>
</form>关于javascript - 从按钮列表创建可重复使用的按钮 css/jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39421631/