[英]jQuery toggle button text and Icon
I am trying to toggle both the icon and the button text on a button and each function works independently, but they will not work when run consecutively. 我试图在按钮上切换图标和按钮文本,每个功能独立工作,但连续运行时它们不起作用。 Seems that the function to toggle the button text is removing my icon altogether. 似乎切换按钮文本的功能是完全删除我的图标。
<button type="button" id="toggle-list-details">
<i class="fa fa-list fa-lg"></i>
List View
</button>
$("#toggle-list-details").click(function() {
$(this).text(function(i, text){
return text === " List View" ? " Details View" : " List View";
});
$(this).find('i').toggleClass('fa-list fa-th-list');
)};
When you do 当你这样做
$(this).text(function(i, text){
this
reffers to <button type="button" id="toggle-list-details">
, so it replaces all inner content with plain text. this
指的是<button type="button" id="toggle-list-details">
,因此它用纯文本替换所有内部内容。
To avoid this, you can do smth like this: 为了避免这种情况,你可以像这样做:
<button type="button" id="toggle-list-details">
<i class="fa fa-list fa-lg"></i>
<span class="text">List View</span>
</button>
$("#toggle-list-details").click(function() {
$(this).find('span').text(function(i, text){
return text === " List View" ? " Details View" : " List View";
});
$(this).find('i').toggleClass('fa-list fa-th-list');
)};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.