將圖標放在按鈕旁邊
[英]Putting icon next to button
問題描述
我遇到了問題。 “顯示更多”旁邊有一個圖標。 按下它時會消失，因為innerText會被替換，所以我嘗試了這個：
document.getElementById("toggleButton").innerText = "Show Less <i class="fas fa-caret-down"></i>" ;
這似乎沒有任何建議嗎？
var status = "less"; function toggleText() { if (status == "less") { document.getElementById("textArea").style.display = "block"; document.getElementById("toggleButton").innerText = "Show Less"; status = "more"; } else if (status == "more") { document.getElementById("textArea").style.display = "none"; document.getElementById("toggleButton").innerText = "Show More"; status = "less" } }
<!DOCTYPE html> <html> <head> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> </head> <body> <div id="textArea" style="display: none;"> test </div> <button type="button" id="toggleButton" onclick="toggleText();" href="javascript:void(0);">Show More <i class="fas fa-caret-down"></i></button> <div id="textArea" style="display: none;"> </div </body> </html>
4 個解決方案
解決方案1
3 已采納 2018-05-05 23:36:14
如果文本字符串包含需要呈現的html，則需要使用innerHTML而不是innerText ：
document.getElementById("toggleButton").innerHTML
解決方案2
2 2018-05-05 23:40:50
我建議切換一個類，這里結合了兩個文本變體的偽。
堆棧代碼段
function toggleText() { document.getElementById("textArea").classList.toggle('hide'); document.getElementById("toggleButton").classList.toggle('less'); }
button::before { content: 'Show more '; } button.less::before { content: 'Show less '; } .textarea.hide { display: none; }
<div id="textArea" class="textarea hide"> test </div> <button type="button" id="toggleButton" onclick="toggleText();"><i class="fas fa-caret-down"></i></button> <div id="textArea2" class="textarea hide"> </div>
使用CSS attr()您可以使用data-*屬性控制標記中的文本，此處結合addEventListener ，這是添加事件處理程序（如click事件）的推薦方法。
堆棧代碼段
var btn = document.querySelector('#toggleButton'); btn.addEventListener('click', function(e) { document.getElementById("textArea").classList.toggle('hide'); this.classList.toggle('less'); })
button::before { margin-right: 5px; /* space between text/icon */ content: attr(data-more); /* get text from attribute */ } button.less::before { content: attr(data-less); } .textarea.hide { display: none; }
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <div id="textArea" class="textarea hide"> test </div> <button type="button" id="toggleButton" data-less="Show less" data-more="Show more"><i class="fas fa-caret-down"></i></button> <div id="textArea2" class="textarea hide"> </div>
解決方案3
2 2018-05-05 23:40:53
問題是你要在這里替換按鈕的全部內容：
document.getElementById("toggleButton").innerText = "Show Less";
您只需"Show Less"即覆蓋原始文本和圖標 。
要解決此問題，您可以使用innerHTML來設置新文本和圖標的HTML：
buttonText.innerHTML = `Show Less <i class="fas fa-caret-up"></i>`;
或者您也可以將文本包裝在另一個元素中以僅更改該部分：
const button = document.getElementById("button"); const buttonText = document.getElementById("buttonText"); const more = document.getElementById("more"); let hidden = true; button.onclick = () => { if (hidden) { more.style.display = "block"; buttonText.innerText = "Show Less"; buttonText.nextElementSibling.setAttribute("data-icon", "caret-up"); hidden = false; } else { more.style.display = "none"; buttonText.innerText = "Show More"; buttonText.nextElementSibling.setAttribute("data-icon", "caret-down"); hidden = true; } };
<!DOCTYPE html> <html> <head> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> </head> <body> <button id="button"> <span id="buttonText">Show More</span> <i id="buttonIcon" class="fas fa-caret-down"></i> </button> <p id="more" style="display: none;"> MORE </p> </body> </html>
解決方案4
2 2018-05-05 23:52:28
為什么不使用unicodes呢？ ⮟⮋🠋這和文本一樣簡單！
離開這里一些向下的箭頭：
⮟BLACK DOWNWARDS EQUILATERAL ARROWHEAD
Hex：2B9F | 十二月：11167
編輯 ：刪除完整列表。
在 twitter 按鈕圖標旁邊顯示喜歡的數量
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.