使用jQuery更改锚点文本和图标

Change anchor text and icon with jquery(使用jQuery更改锚点文本和图标)

问题描述

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

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

锚定标签：

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

我需要类从"图标-箭头-向上图标-白色"切换到"图标-箭头-向下图标-白色"，并在切换期间返回。

Java脚本(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’)；的内容，但这不会起作用，因为在初始切换后锚点文本会被覆盖。

谢谢您的帮助。

推荐答案

试试这个-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";
});

这篇关于使用jQuery更改锚点文本和图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！