使用 jquery 更改锚文本和图标

Question

我有一个隐藏或显示 div 的锚标记，但我无法更改它的文本和图标。

如何更改文本和图标标签，因为目前它会将图标标签解析为常规文本。

锚标记：

<a class="collapse-info btn"><i class="icon-arrow-up icon-white"></i> Hide Info</a>

我需要课程从“icon-arrow-up icon-white”变为“icon-arrow-down icon-white”，然后在切换期间返回。

Javascript (jquery)

$('.collapse-info').toggle(function() {
$('.server-info').slideUp();
$(this).text('Show Info');
}, function () {
$('.server-info').slideDown();
$(this).text('Hide Info');
});

正在尝试类似 $("#collapse-icon").toggleClass('icon-arrow-down');但这不起作用，因为锚文本在初始切换后被覆盖。

感谢您的帮助。

Answer 1

试试这个 - DEMO

$('.collapse-info').toggle(function() {
    //$('.server-info').slideUp();
    $(this).find("i").removeClass("icon-arrow-up").addClass("icon-arrow-down");
    this.childNodes[1].nodeValue = "Show Info";
}, function () {
    //$('.server-info').slideDown();
    $(this).find("i").removeClass("icon-arrow-down").addClass("icon-arrow-up");
    this.childNodes[1].nodeValue = "Hide Info";
});

Answer 2

首先，<i> 标签用于斜体文本而不是图标。
现在回答您的问题，我假设您有某种背景图像分配给您想要更改的<i> 标签。
为什么不将类分配给 <a> 标签本身，而不是 a 标签内的元素。 那么更改 a 标签的 html 不会给您带来问题。
您的 js 将如下所示：

$('.collapse-info').toggle(function() {
  $('.server-info').slideUp();
  $(this).text('Show Info');
  $(this).addClass('icon-arrow-down').removeClass('icon-arrow-up');
}, function () {
  $('.server-info').slideDown();
  $(this).text('Hide Info');
  $(this).addClass('icon-arrow-up').removeClass('icon-arrow-down');
});