如何使用 jQuery 查找所有值为 Green 的输入框，并更改其下一个同级 span 的文本?
概述
使用 JQuery 可以实现此功能，因为 JQuery 库提供了将 span 文本更改为输入值的方法。要实现此功能，我们需要具备基本的 HTML 和 JQuery 知识。JQuery 提供了 next() 和 text() 方法，这两个方法在构建此功能中起着至关重要的作用。我们还将使用一些样式方法，使更改与其他普通文本区分开来。
语法
此功能使用的语法是 −
$(selector).next().text("text");
selector − 上述语法中的选择器被称为绿色的输入值，即 input[value="green"]。
next() − next() 方法是一个 Jquery 方法，用于获取当前元素的下一个同级元素。
text() − text() 方法用于将文本设置为所选元素。
算法
步骤 1 − 在文本编辑器中创建一个 HTML 文件，并向其中添加 HTML 样板。
步骤 2 − 现在将 Jquery CDN 链接添加到文件的 head 标签。
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script>
步骤 3 − 现在创建一个父容器，其中包含带有 value 属性的 input 标签。
步骤 4 − 创建三个 radio 输入类型，并将值 yellow 作为属性值。
<div> <input type="radio" value="yellow"> </div> <div> <input type="radio" value="yellow"> </div> <div> <input type="radio" value="green"> </div>
步骤 5 − 在创建任意值的 input 标签后，添加 span 标签。
<div> <input type="radio" value="yellow"><span>value1</span> </div> <div> <input type="radio" value="yellow"><span>value2</span> </div> <div> <input type="radio" value="green"><span>value3</span> </div>
步骤 6 − 现在创建一个"立即检查"按钮来更改 span 文本值。
<button>立即检查</button>
步骤 7 − 现在向 body 元素添加一个 script 标签。
<script></script>
步骤 8 − 现在选择按钮作为选择器，以触发 span 文本更改功能。
$("button").click(() => {});
步骤 9 − 现在选择输入标签作为选择器，并将值类型设置为绿色。
$('input[value="green"]').next().text("Green");
$('input[value="green"]').next().css({
"backgroundColor": "green",
"color": "white", "padding": "0.2 0.5rem"
});
步骤 10 - 用户点击后，颜色和文本会发生变化。
示例
在本例中，我们将使用 radio 类型的输入标签创建一个简单的单选按钮，并将 value 属性添加到这些输入标签，分别为"yellow"和"green"。由于我们需要更改下一个 span 的文本，因此我们将在创建输入标签后立即创建几个 span 标签。
<html>
<head>
<title> change the text of next span</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
</head>
<body>
<h3> Span will change to green on clicking button</h3>
<div style="display: flex;flex-direction: column;">
<div>
<input type="radio" value="yellow"><span>value1</span>
</div>
<div>
<input type="radio" value="yellow"><span>value2</span>
</div>
<div>
<input type="radio" value="green"><span>value3</span>
</div>
<button style="width: 10rem;margin-top: 0.8rem;">Check Now</button>
</div>
<script>
$("button").click(() => {
$('input[value="green"]').next().text("Green");
$('input[value="green"]').next().css({
"backgroundColor": "green",
"color": "white", "padding": "0.2 0.5rem"
});
})
</script>
</body>
</html>
下图展示了上述示例的输出，其中显示了三个单选按钮，其跨度文本分别为"value1"、"value2"和"value3"。这三个单选按钮被赋予了一个属性，因此当用户点击"立即检查"按钮时，包含绿色值的输入类型单选按钮的值将发生变化，如第二幅图所示。图中绿色背景显示了第三个单选按钮的值的变化。
结论
上述功能有助于创建 Web 应用程序(例如测验应用程序)或任何其他类型的数据操作。此类功能也可用于构建一些策略游戏。为了获得上述结果，您应该始终在 next() 方法之前检查选择器，因为它只会选择您指定的值。
