将图标放在按钮旁边
[英]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.