文本和字体-切换时很棒的图标不会改变
文本和字体-切换时很棒的图标不会改变
提问于 2019-07-06 07:20:34
我正在尝试在单击按钮时更改其文本，并在再次单击时将其恢复为正常。这个按钮使用了一个很棒的字体图标，所以我想我会尝试使用this.html而不是this.text，但由于某种原因，它不能识别我所指示的超文本标记语言？
如果我更改了else语句上的HTML，那么它将在单击时更改，这使我认为这是它无法识别我的HTML的问题。
我知道这可能是非常愚蠢的事情，但似乎无法弄清楚。
$(document).ready(function(){
$("#submitbutton").on("click", function(){
if($(this).html()=="View code <i class=\"fas fa-chevron-right fa-xs\"></i>")
{
$(this).html("Close code <i class=\"fas fa-chevron-right fa-xs\"></i>");
} else {
$(this).html("View code <i class=\"fas fa-chevron-right fa-xs\"></i>");
}
})
}); <div class="getcodebuttoncontainer">
<button
type="button"
class="btn-primary"
id="submitbutton"
onclick="retrieveData()"
>View code <i class="fas fa-chevron-right fa-xs"></i></button>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-06 07:34:49
看起来唯一的变化是文本( "View || Close ")，所以你可以简单地将变量文本放在跨度中-一个带有display: none样式的跨度，然后点击切换每个跨度的可见性。
$(document).ready(function(){
$("#submitbutton").on("click", function(){
$(this).find('span').toggle();
})
});#submitbutton span:nth-of-type(2) {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="getcodebuttoncontainer">
<button
type="button"
class="btn-primary"
id="submitbutton"
>
<span>View</span>
<span>Close</span>
code <i class="fas fa-chevron-right fa-xs"></i>
</button>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56910085
复制相关文章
相似问题
腾讯云开发者
