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

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

转载作者：行者123 更新时间：2023-12-01 02:39:03

我这段代码的目标是，当单击其中一个 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/

文章推荐： javascript - 如何使用 A-Frame 显示一段/一段文字？

文章推荐： javascript - 突出显示悬停行的特定表格单元格

文章推荐： apache - 无法从主机名确定 IP 地址

文章推荐： javascript - 函数无法正确计算元素数量

自动完成中未使用 Xcode 片段
我已将重要信息加粗以使其更易于阅读。我昨天刚刚更新到Xcode 7.3并且一整天都在尝试解决我的问题。对于类(class)，我们用 C 编程并使用 SVN 修改我们所有的文件以创建我们的项目。我使
URL 片段 (#) 允许的字符
在互联网上进行了一些挖掘之后，我无法找到一个很好的答案来说明我可以将哪些字符用于 URL 片段。我正在编写一个 javascript 脚本，它将利用 URL 片段。我想让 URL 看起来不那么复杂，
每个关键帧中带有标题的 MP4 片段
我正在尝试在分段文件(styp)的 mp4 容器中定位 h264 帧。对于分割，我目前使用 MP4Box dash。我使用 MP4Box 解析器，我注意到在每个关键帧(IDR)中样本的大小与原始文件中
jquery - 片段 - 淡入然后淡出
我想要一个自定义片段动画，以便它们淡入右/淡入左，然后在短暂延迟后淡出。假定所有片段都具有类 .visible 和 .current-fragment。我以为我可以在短暂的延迟后删除类 .visibl
C# Autolevel 片段？
有没有人看到过在 C# 中自动调平图像的任何好的片段？最佳答案参见 http://code.google.com/p/aforge/ 关于C# Autolevel 片段？，我们在Stack O
controls - 如何从控件获取父 View /片段
如何检索 View 所属的 Fragment/sap.ui.core.Control？ BR 克里斯最佳答案如果您的控件的标识符包含 View 的标识符(如果您使用的是 XML View ，则类似
lua - 试图理解这个 lua 片段
我试图了解这个函数的作用。任何人都可以向我解释这一点吗？ function newInstance (class) local o = {} setmetatable (o, clas
dependencies - 用于安装依赖项最新版本的 Nuspec 片段
简介根据 this documentation可以指定依赖项，包括每个包的版本，如下所示: 问题需要应用哪个 Nuspec 片段才能安装依赖项的最新版本？最佳答案不幸的是，您无法
graphql - 如何在多种类型上使用 GraphQL 片段
我有一个 Gatsby 项目，它对两种不同类型的内容进行了非常相似的 GraphQL 查询:常规页面和 wiki 文章。按蛞蝓页 export const query = graphql` q
jsp - 检查是否设置了 JSP 片段
我遇到了以下教程 JSP tricks to make templating easier?用于使用 JSP 创建页面模板(我怎么这么久都没有想到这个？!？)。但是，在进行了一些搜索之后，我似乎无法弄
模型的 Django HTML 片段
我是 Django 的新手，我试图找出如何将 HTML 片段与模型相关联。我的 HTML 片段只是一个 div。我想重用那个 div(你可以把它想象成一个缩略图) 情况是这样的:在我的主页中，我想显
Vim 片段，没有片段/模板插件
我经常使用 vim，但我的工作流程通常迫使我与其他 IDE 交互，所以我不是一个像上帝一样的 vim super 用户，我也不想很快成为。 Vim 不是我的 IDE，我也不希望它是。这是一款快速轻便的
如果前面的脚本失败，则执行或不执行 JavaScript 片段
我刚刚了解到一个关于在抛出错误时执行 Javascript 的重要事实。在我开始对此下结论之前，我最好验证一下我是否正确。给定一个包含 2 个脚本的 HTML 页面: 脚本1: doSometh
google-chrome - 片段-标识符已被声明
我是在Chrome片段中编写的: let myVar = someValue; 当我尝试第二次运行它时，它说该变量已被声明并在第一行引发错误。错误是: Uncaught SyntaxError: I
opengl - 同一程序中可以有多个像素(片段)着色器吗？
我想要两个像素着色器；首先要做一件事，然后再做其他事情。这是可能的，还是我必须将所有内容打包到一个着色器中？最佳答案您可以这样做，例如通过从主入口点对在各种着色器对象中实现的函数进行函数调用。 m
syntax-error - 有条件的情况下如何正确使用加法？片段
我正在尝试检查汽车前面是否有任何障碍物。假设汽车在位置“2”。我的目标是检查位置“3”处是否有障碍物。可能没有明确的障碍事实，这意味着在特定位置没有障碍。我检查使用是否存在有条件。但是在规则 r6
javascript - 在文本区域内添加 Javascript 片段
我想在文本区域内编写一个 JavaScript，而不运行 JavaScript。显示为一些可复制的文本。我使用 jquery 同时插入文本区域和代码片段: $("#copy-snippet-cont
regex - 解释一下这个 .htaccess 片段
有人可以解释以下 htacess 行，我理解部分内容，但想要更深入的知识。作为注释，我假设它按预期工作，这目前还没有上线，我只是在阅读一些工作簿，这是打印的。 // Don't understand
f# - 方便的 F# 片段
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
javascript - 如何在更改选择列表值时附加和删除 html 片段
我目前正在尝试使用 Jquery 根据下拉列表的值附加音频标签 html 列表。主要问题是，当选择值更改时，empty() 和append() 方法根本不会将html 注入(inject)到播放列表d

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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