這就是我想要做的：當一個按鈕被點擊時，一個段落元素被另一個段落元素替換。我希望它是無縫的，其中一個段落元素消失了，而另一個段落元素出現在它的位置。
但無論我嘗試什么，我似乎都無法讓其他段落元素出現。要隱藏的段落元素消失得很好，但另一個 span 元素沒有出現在它的位置。
我嘗試了很多不同的方法，比如
<p style="display: none;" id="element_to_show">text to show</p>
...
document.getElementById('element_to_show').style.display = "block";
也
<p hidden id="element_to_show">text to show</p>
...
document.getElementById('element_to_show').hidden = false;
也
<p style="visibility: hidden;" id="element_to_show">text to show</p>
...
document.getElementById('element_to_show').style.visibility = "visible";
但似乎沒有任何效果。
我知道在 Javascript 中，我可以通過 document.createElement() 創建我想要的新段落，然后使用 replaceWith()，但是段落元素中還有其他各種元素需要重新創建，這在編程上會很混亂. 更不用說當用戶單擊另一個按鈕以恢復該段落元素時，我必須重新創建原始段落元素。僅在 HTML 中對元素進行編碼并在單擊按鈕時顯示和隱藏它們似乎很容易，但我就是做錯了。
注意：請不要告訴我如何在 jQuery 中執行此操作，除非您認為這是唯一的方法。如果可能的話，我想用香草 Javascript 來完成它。
這是HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to our website!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="profile">
<p id="profile_first_name_show">
<span class="profile_label">First name:</span>
<span id="profile_first_name_edit">
<span id="profile_first_name_value">{{ request.session.current_user_data.first_name }}</span>
<button onclick="show_hidden()"><span class="glyphicon glyphicon-pencil"></span></button>
</span>
</p>
<p style="visibility: hidden;" id="profile_first_name_edit">
text to show
</p>
</div>
</body>
</html>
這是 .js 檔案
function show_hidden() {
document.querySelector("#profile_first_name_edit").style.visibility = "visible"; // this and various other methods don't work!!
document.getElementById('profile_first_name_show').style.display = "none"; // this works!
}
uj5u.com熱心網友回復：
如果您使用可見性元素，即使它們被隱藏，它們也會占用 dom 中的空間。如果要替換元素，請使用 display:none。id 也必須是唯一的
function show_hidden() {
document.getElementById("profile_first_name_edit2").style.display='block'
document.getElementById('profile_first_name_show').style.display = "none"; // this works!
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to our website!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="profile">
<p id="profile_first_name_show">
<span class="profile_label">First name:</span>
<span id="profile_first_name_edit">
<span id="profile_first_name_value">Dave Smith</span>
<button onclick="show_hidden()">click me</button>
</span>
</p>
<p style='display:none' id="profile_first_name_edit2">
text to show
</p>
</div>
</body>
</html>uj5u.com熱心網友回復：
您在兩個不同的元素中使用相同的 ID，請改用 class 或在不同的元素中使用不同的 ID：
function show_hidden() {
document.getElementById("profile_first_name_edit_2").style.visibility = "visible";
document.getElementById('profile_first_name_show').style.display = "none"; // this works!
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to our website!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="profile">
<p id="profile_first_name_show">
<span class="profile_label">First name:</span>
<span id="profile_first_name_edit">
<span id="profile_first_name_value">{{ request.session.current_user_data.first_name }}</span>
<button onclick="show_hidden()"><span class="glyphicon glyphicon-pencil"></span></button>
</span>
</p>
<p style="visibility: hidden;" id="profile_first_name_edit_2">
text to show
</p>
</div>
</body>
</html>來自 MDN：
Document 方法 querySelector() 回傳檔案中與指定選擇器或選擇器組匹配的第一個元素。如果沒有找到匹配項，則回傳 null。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/532017.html