我有一個帶有 pause_circle_outline 物化圖示的“暫停”按鈕，當它單擊時，我想將文本更改為“恢復”并將圖示更改為 play_circle_outline，但是當我嘗試更改文本時，它更改了文本并洗掉了圖示. 這是我的代碼片段示例：
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
document.getElementById("pause_btn").innerText = "Resume"
});
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Sources/js/select_require.js"></script>
<script src = "Sources/js/routes.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<body>
<a class="waves-effect waves-light btn" id="pause_btn">Pause<i class="material-icons right">pause_circle_outline</i></a>
</body>
</html>uj5u.com熱心網友回復：
.innerText是一種訪問節點的“安全”方式innerHTML，在您的情況下，它包括Pause-text 和<i.../>標簽。解決這個問題的一種方法是添加一個span來保存文本。spans 不做任何事情，但它們通過使文本節點可編輯來提供幫助！
例子：
var playing = true
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
playing = !playing
// I used querySelector instead of getElementById to get to the span directly.
if(playing) {
document.querySelector("#pause_btn span").innerText = "Pause"
document.querySelector("#pause_btn i").innerText = "pause_circle_outline"
} else {
document.querySelector("#pause_btn span").innerText = "Resume"
document.querySelector("#pause_btn i").innerText = "play_circle_outline"
}
});
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Sources/js/select_require.js"></script>
<script src = "Sources/js/routes.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<body>
<a class="waves-effect waves-light btn" id="pause_btn">
<span>Pause</span>
<i class="material-icons right">pause_circle_outline</i>
</a>
</body>
</html>我還添加了一些額外的代碼以使其可多次點擊！
uj5u.com熱心網友回復：
textContent 和 innerText 都在更改時洗掉子節點
檔案
也許將您的文本放在span帶有 ID 的 a 中并更改它的textContent?
這樣你的i標簽應該保持不變。
uj5u.com熱心網友回復：
您是否嘗試過將圖示與文本一起放入 innerHTML？
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
document.getElementById("pause_btn").innerHTML = 'Resume<i >pause_circle_outline</i>'
});
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Sources/js/select_require.js"></script>
<script src = "Sources/js/routes.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<body>
<a class="waves-effect waves-light btn" id="pause_btn">Pause<i class="material-icons right">pause_circle_outline</i></a>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/425252.html
標籤：javascript html 按钮 图标 实现
上一篇：Tkinter標簽和按鈕未呈現