Question

我可以通过单击按钮更改显示/隐藏选项中的文本和图标。但是，当图标应用于按钮时，它会更改字体系列。

如果我将按钮添加到按钮，它将应用于字体真棒图标css，因此它会更改图标上的字体系列，但不会显示。

有没有办法单独为文本设置字体系列而不影响字体真棒图标。

HTML code：

 <button class="btn btn-default" type="search" id="filter">
            <i class="fa fa-down"></i>
                Show 
</button>

Jquery的：

$("#filter").click(function(e) {
            $(this).toggleClass("active").next().slideToggle("fast");

if ($.trim($(this).text()) === 'Show') {
    $(this).text('Hide');
    $(this).addClass('fa fa-up');
//  $(this).addClass('custom-font');
} else {
    $(this).text('Show Filter');  
    $(this).addClass('fa fa-down');
  }

return false; 

    });

Answer 1

你有两个问题。您正在使用.text()替换按钮的全部内容，而不仅仅是文本节点。因此，您只需要替换文本节点以保留图标。然后，您需要更改图标上的类而不是按钮。

if ($.trim($(this).text()) === 'Show') {
    $(this).contents().last()[0].textContent = 'Hide';
    $(this).find('.fa').removeClass('fa-down').addClass('fa-up');
//  $(this).addClass('custom-font');
} else {
    $(this).contents().last()[0].textContent = 'Show Filter';  
    $(this).find('.fa').removeClass('fa-up').addClass('fa-down');
}

或者，您可以使用.html将旧的html替换为新的。

if ($.trim($(this).text()) === 'Show') {
    $(this).html('<i class="fa fa-up"></i>Hide');
//  $(this).addClass('custom-font');
} else {
    $(this).html('<i class="fa fa-down"></i>Show Filter');
}

在切换jquery上更改图标

1 个答案: