时间戳

首页 > 解决方案 > 如何使用 JQuery 选择特定的 HTML 片段？

javascript - 如何使用 JQuery 选择特定的 HTML 片段？

问题描述

我对这段代码的目标是，当点击其中一个树枝时，它会使用 JQuery 和 Javascript 将点击^的内容从 a更改^为 a O（这是用于学校作业）。例如，如果我单击最顶部^，它将替换为^a O，或者如果我单击第二行的最左侧^，它会将其更改^为 a O，等等。我想尝试保持它相当简单，只添加到我已经拥有的现有代码，而不是替换所有代码。我是 Javascript 和 JQuery 编码的初学者，所以请避免使用超高级的策略。非常感谢。

当前代码： 

```
<!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>

标签： javascriptjqueryhtml

解决方案

在生成树循环时，您需要替换以下代码

    $("#treeBranches").append("^");

和

    $("#treeBranches").append('<span class="leaf">^</span>');

它将创建每个叶子作为可访问的组件

然后以下代码将用于将特定的叶子更改为装饰

    ///////////change ornament/////////////
    $(document).on('click','.leaf', function() {
        $(this).html('O');  
    })
    ///////////run newTree command////////////////

推荐阅读