我这段代码的目标是，当单击其中一个 Twig 时，它将单击的 ^ 从 ^ 更改为 O 使用 JQuery 和 Javascript(这是学校作业)。例如，如果我单击最上面的 ^ ，它会将 ^ 替换为 O，或者如果我单击最左边的 ^ 在第二行中，它将把 ^ 更改为 O 等。我想尝试保持它相当简单，只添加到我已经拥有现有代码，而不是全部替换。我是 Javascript 和 JQuery 编码的初学者，所以请避免使用 super 高级的策略。非常感谢。
当前代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>Welcome to the Holiday Tree Simulator</h1>
<ul>
<li> Click a green branch (<font color=green>^</font>) to change it into a red ornament
<li> Click a red ornament (<font color=red>O</font>) to turn it into an unlit light (only when power is off)
<li> Click an unlit light (<font color=gray>*</font>) to turn it into a green branch (only when power is off)
</ul>
<hr>
<div id=treeArea align=center style="font-family: Courier">
<font id=treeBranches style="font-family: Courier" color="green"></font>
<font id=treeTrunk style="font-family: Courier" color="brown"></font>
</div>
</div>
<hr>
Tree Size:<input type=text id=treeSize></input>
Trunk Size:<input type=text id=trunkSize></input>
<button id=new>New Tree</button><br>
Power: <span id=powerVal>OFF</span>
<button id=power>Toggle Power</button>
</body>
<script src=http://code.jquery.com/jquery.min.js type=text/javascript></script>
<script type=text/javascript>
var treeSize = 8;
var trunkSize = 3;
for (var row=1 ; row<=treeSize ; row++){
for (var col=1 ; col<=row ; col++)
$("#treeBranches").append("^");
$("#treeBranches").append("<br>");
}
for (var trunkrow=1 ; trunkrow<=trunkSize ; trunkrow++){
for (var trunkcol=1 ; trunkcol<=2 ; trunkcol++)
$("#treeTrunk").append("|");
$("#treeTrunk").append("<br>");
}
//////////new tree//////////
$("#new").click(function newTree(){
$("#treeBranches").html("")
$("#treeTrunk").html("")
treeSize = document.getElementById("treeSize").value;
trunkSize = document.getElementById("trunkSize").value;
for (var row=1 ; row<=treeSize ; row++){
for (var col=1 ; col<=row ; col++)
$("#treeBranches").append("^");
$("#treeBranches").append("<br>");
}
for (var trunkrow=1 ; trunkrow<=trunkSize ; trunkrow++){
for (var trunkcol=1 ; trunkcol<=2 ; trunkcol++)
$("#treeTrunk").append("|");
$("#treeTrunk").append("<br>");
}
})
///////////change ornament/////////////
$("#treeBranches").click(function changeOrnament(){
})
///////////run newTree command////////////////
///////////run newTree command////////////////
</script>
</html>
```更新:这是我的项目的完成代码，谢谢您的建议，我知道这是一个学校项目，但我不需要为我完成工作，我只需要被推向正确的方向，你们做到了，所以谢谢你们。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>Welcome to the Holiday Tree Simulator</h1>
<ul>
<li> Click a green branch (<font color=green>^</font>) to change it into a red ornament
<li> Click a red ornament (<font color=red>O</font>) to turn it into an unlit light (only when power is off)
<li> Click an unlit light (<font color=gray>*</font>) to turn it into a green branch (only when power is off)
</ul>
<hr>
<div id=treeArea align=center style="font-family: Courier">
<font id=treeBranches style="font-family: Courier" color="green"></font>
<font id=treeTrunk style="font-family: Courier" color="brown"></font>
</div>
<hr>
Tree Size:<input type=text id=treeSize></input>
Trunk Size:<input type=text id=trunkSize></input>
<button id=new>New Tree</button><br>
Power: <span id=powerVal>OFF</span>
<button id=power>Toggle Power</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=text/javascript></script>
<script type=text/javascript>
var treeSize = 8;
var trunkSize = 3;
for (var row=1 ; row<=treeSize ; row++)
{
for (var col=1 ; col<=row ; col++)
{
$("#treeBranches").append("<font class='branches'>^</font>");
}
$("#treeBranches").append("<br>");
}
for (var trunkrow=1 ; trunkrow<=trunkSize ; trunkrow++)
{
for (var trunkcol=1 ; trunkcol<=2 ; trunkcol++)
$("#treeTrunk").append("|");
$("#treeTrunk").append("<br>");
}
///////////change ornament/////////////
$(".branches").click(changeOrnament);
function changeOrnament()
{
if ($(this).html()=="^")
{
$(this).attr("color","red");
$(this).html("O");
$(this).attr("class","not_ast")
}
else if ($(this).html()=="O" && power==0)
{
$(this).attr("color","gray");
$(this).html("*");
$(this).attr("class","ast")
}
else if ($(this).html()=="*" && power==0)
{
$(this).attr("color","green");
$(this).html("^");
$(this).attr("class","not_ast");
}
}
//////////new tree//////////
$("#new").click(newTree);
function newTree()
{
$("#treeBranches").html("")
$("#treeTrunk").html("")
treeSize = document.getElementById("treeSize").value;
trunkSize = document.getElementById("trunkSize").value;
for (var row=1 ; row<=treeSize ; row++)
{
for (var col=1 ; col<=row ; col++)
{
$("#treeBranches").append("<font class='new_branches'>^</font>");
}
$("#treeBranches").append("<br>");
}
for (var trunkrow=1 ; trunkrow<=trunkSize ; trunkrow++)
{
for (var trunkcol=1 ; trunkcol<=2 ; trunkcol++)
$("#treeTrunk").append("|");
$("#treeTrunk").append("<br>");
}
$(".new_branches").click(changeOrnament);
}
var power=0;
$("#power").click(powerToggle);
function powerToggle()
{
if (power==0)
{
$("#powerVal").html("ON");
power=1;
$(".ast").attr("color","yellow");
}
else
{
$("#powerVal").html("OFF");
power=0;
$(".ast").attr("color","gray");
}
}
///////////run newTree command////////////////
///////////run newTree command////////////////
</script>
</html>最佳答案
在生成树循环时，需要替换以下代码
$("#treeBranches").append("^");
与
$("#treeBranches").append('<span class="leaf">^</span>');
它将把每个叶子创建为可访问的组件
然后以下代码将可以将特定的叶子更改为装饰
///////////change ornament/////////////
$(document).on('click','.leaf', function() {
$(this).html('O');
})
///////////run newTree command////////////////
关于javascript - 如何使用 JQuery 选择特定的 HTML 片段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59189504/