jQuery切换按钮文本和图标

Question

我试图在按钮上切换图标和按钮文本，每个功能都独立工作，但连续运行时它们不起作用。似乎切换按钮文本的功能是完全删除我的图标。

<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'); 
)};

Answer 1

当你这样做时

$(this).text(function(i, text){ 

this引用<button type="button" id="toggle-list-details">，因此它用纯文本替换所有内部内容。

为了避免这种情况，你可以这样做：

<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'); 
)};