資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 jQuery 查詢所有值為“Green”的輸入元素，並更改其下一個兄弟 span 元素的文字？
概述
使用 jQuery，我們可以建立此功能，因為 jQuery 庫提供了將 span 文字更改為輸入值的方法。此功能需要預先了解基本的 HTML 和 jQuery。jQuery 提供了 next() 和 text() 方法，這兩種方法在構建此功能中起著至關重要的作用。我們還將使用一些樣式方法，以便更改與其他普通文字區分開來。
語法
此功能中使用的語法為：
$(selector).next().text("text");
選擇器 - 上述語法中的選擇器被稱為值為 green 的輸入元素，表示為 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 - 建立三個值為“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>Check Now</button>
步驟 7 - 將 script 標籤新增到 body 元素中。
<script></script>
步驟 8 - 選擇按鈕作為選擇器，以觸發 span 文字更改函式。
$("button").click(() => {});
步驟 9 - 選擇值為 green 的 input 標籤作為選擇器。
$('input[value="green"]').next().text("Green");
$('input[value="green"]').next().css({
"backgroundColor": "green",
"color": "white", "padding": "0.2 0.5rem"
});
步驟 10 - 使用者單擊顏色後，文字將發生更改。
示例
在此示例中，我們將使用 type 為 radio 的 input 標籤構建一個簡單的單選按鈕，並將 value 屬性設定為“yellow”和“green”。由於我們必須更改下一個 span 的文字，因此我們將在建立的 input 標籤後建立一些 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>
下圖顯示了上述示例的輸出，其中顯示了三個單選按鈕，以及一些 span 文字“value1”、“value2”和“value3”。這三個單選按鈕都分配了一個屬性，因此當用戶單擊“檢查”按鈕時，值為 green 的單選按鈕將發生更改，如第二張圖片所示。它顯示了第三個單選按鈕的值更改為綠色背景。
結論
上述功能可以幫助建立諸如測驗應用程式或任何其他型別的資料處理的 Web 應用程式。這種型別的功能也可以用於構建一些戰略遊戲。為了獲得上述結果，您應該始終在 next() 方法之前檢查選擇器，因為它只會選擇您提到的值。
瀏覽量：100
