大家好，我是 javascript/jquery 的初学者。我正在制作一个使用电池(用 CSS 绘制)并允许用户通过单击连接 + 和 - 端子的应用程序，然后根据电池的接线方式显示总电压和安培小时输出。
我如何让用户点击正方 block 或负方 block (它们只是电池类中的 div 标签)，然后将用户点击了某些框的信息转发给 javascript，然后以某种方式将电线(只是一条线)出现在用户点击的位置之间。我真的不知道我将如何编写代码。谢谢
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="batterypagestylesheet.css">
<script>
</script>
</head>
</body>
<div id="batterysection">
<div id="pterminal">+ terminal</div>
<div id="nterminal">- terminal</div>
</div>
<div class="battery">
<div id="pos">+</div>
<div id="neg">-</div>
</div>
<div class="battery2">
<div id="pos">+</div>
<div id="neg">-</div>
</div>
</body>
</html>
CSS:
#batterysection{
background-color:purple;
margin-left:auto;
margin-right:auto;
width:1100px;
height:800px;
}
#pterminal{
position:absolute;
left:500px;
top:50px;
width:200px;
height:100px;
background-color:red;
color:white;
text-align:center;
font-size:40px;
}
#nterminal{
position:absolute;
left:700px;
top:50px;
width:200px;
height:100px;
background-color:black;
color:white;
text-align:center;
font-size:40px;
}
.battery{
position:absolute;
top:200px;
left:600px;
width:100px;
height:75px;
background-color:grey;
border:solid 2px;
}
.battery2{
position:absolute;
top:200px;
left:700px;
width:100px;
height:75px;
background-color:grey;
border:solid 2px;
}
#pos{
position:relative;
height:25px;
width:25px;
background-color:red;
color:white;
margin-left:40px;
text-align:center;
}
#neg{
position:relative;
height:25px;
width:25px;
background-color:black;
color:white;
margin-left:40px;
top:20px;
text-align:center;
}
最佳答案
非常基础
$('#pterminal').click(function() {
// pterminal clicked
});
您有一个带有 jQuery 的点击事件处理程序。
画一条线听起来像是你现在在 HTML5 Canvas 元素上做的事情。看到你是初学者，你可能会花一些时间在像 http://www.codecademy.com/courses/web-beginner-en-SWM11/0/1 这样的类(class)上.
还要注意什么是 id 和什么是 class。 Id (#) 是唯一的，只有一个 - 类 (.) 有点像标签:当你有类似的东西时使用它们。因此，制作#battery1 和#battery2 id 以及 .pos 和 .neg 类更有意义。
关于javascript - 如何使用 javascript 显示视觉效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23121458/