如何更改<span>类名？

Question

我想在操作之后更改span的图标。

Html：

<div class="btn-group">
    <button type="button" id="statusButton1" class="btn btn-warning text">
        <span id="iconka" class="glyphicon glyphicon-star"></span> На модерации</button>
    <button type="button" id="statusButton2" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#" id="action-1">На модерации</a></li>
    <li><a href="#" id="action-2">Offline</a></li>
    <li><a href="#" id="action-3">Online</a></li>
    <li><a href="#" id="action-4">В архив</a></li>
  </ul>
</div><!-- /btn-group -->

联署材料：

$("#action-1").click(function(){   
//change class of button
  var className = $('#statusButton1').attr('class'); 
  $('#statusButton1').removeClass(className).addClass('btn btn-warning text');                      $('#statusButton2').removeClass(className).addClass('btn btn-warning dropdown-toggle');

    //change class (icon) of button

    var spanClass = $('#iconka').attr('class');
    $('#iconka').removeClass(spanClass).addClass('glyphicon glyphicon-time'); 

// this not working for span

    alert (spanClass);    

});

http://jsfiddle.net/52VtD/2472/

在例子中

Answer 1

正如RC所提到的，您正在调用.html()，它同时移除文本节点和span元素。我在这里更新了你的小提琴：

http://jsfiddle.net/52VtD/2475/

我所做的改变是：

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text(),
         icon = $('#iconka').detach(); // REFERENCE TO REAPPEND
  $(this).parents('.btn-group').find('.text').html(' ' + selText).prepend(icon);
});

额外的空格是在调用.html()时解决格式化问题。我会删除空格并使用CSS来处理这个问题。

Answer 2

您应该用类将文本包装在元素中，这样就可以将其作为目标。

您当前的目标是移除图标和文本。

<span id="iconka" class="glyphicon glyphicon-star"></span>
<span class="just-text">На модерации</span>

并使用

$(this).parents('.btn-group').find('.just-text').html(selText);