Question

我想在动作后更改跨度的glyphicon。

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 -->

JS：

$("#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

你应该将文本包装在一个带有类的元素中，这样你就可以将它作为目标..

您当前的定位会移除图标和文字..

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

并使用

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

Answer 2

正如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来处理它。

如何更改<span>类名？</span>

2 个答案: