首页 文章

用jquery更改锚文本和图标

提问于
浏览 次
2

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

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

锚标记：

<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'）;但由于在初始切换后覆盖了锚文本，因此无效 .

谢谢你的帮助 .

javascript jquery twitter-bootstrap anchor toggleclass

2 回答

  • 3

    试试这个 - 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";
});
    回复于
  • 0

    首先， <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');
});
    回复于

相关问题