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>标签本身，而不是标签内的元素。然后更改标签的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');
});

用jquery更改锚文本和图标

2 个答案: