当我更新bs3中的组列表时，我丢失了glyphicon

Question

这是我的HTML

    <div class="list-group">
        <a href="#" id="lblChoice0" class="list-group-item">zero<i id="0" class="icon-volume-up icon-2x"></i></a> 
        <a href="#" id="lblChoice1" class="list-group-item">one<i id="1" class="icon-volume-up icon-2x"></i></a>
        <a href="#" id="lblChoice2" class="list-group-item">two<i id="2" class="icon-volume-up icon-2x"></i></a>
        <a href="#" id="lblChoice3" class="list-group-item">three<i id="3" class="icon-volume-up icon-2x"></i></a>
        <a href="#" id="lblChoice4" class="list-group-item">four<i id="4" class="icon-volume-up icon-2x"></i></a>
    </div>

我正在使用以下代码从我的数据库中读取js ajax来更改group-list的文本：

    $('#lblChoice0').html(msg.d[0]);
    $('#lblChoice1').html(msg.d[1]);
    $('#lblChoice2').html(msg.d[2]);
    $('#lblChoice3').html(msg.d[3]);
    $('#lblChoice4').html(msg.d[4]);

如何让glyphicons留下？

Answer 1

试试这个：

$('#lblChoice0').html(msg.d[0] + '<i id="0" class="icon-volume-up icon-2x"></i>'); $('#lblChoice1').html(msg.d[1] + '<i id="1" class="icon-volume-up icon-2x"></i>'); $('#lblChoice2').html(msg.d[2] + '<i id="2" class="icon-volume-up icon-2x"></i>'); $('#lblChoice3').html(msg.d[3] + '<i id="3" class="icon-volume-up icon-2x"></i>'); $('#lblChoice4').html(msg.d[4] + '<i id="4" class="icon-volume-up icon-2x"></i>');

OR（这可能更好）：

将您的HTML设为：

<a href="#" id="lblChoice0" class="list-group-item"><span id="title_0">zero</span><i id="0" class="icon-volume-up icon-2x"></i></a>

然后在jQuery中：

$('#title_0').html(msg.d[0]);

显然对所有5行做同样的事情。

Answer 2

这是因为您替换了包含图标的a的全部内容。最简单的方法是将文本包装在另一个元素中，然后改变元素内容。

$(document).ready(function() {
  $('#try').click(function() {
    var msg = {
      d: ['a', 'b', 'c', 'd', 'e']
    };
    $('#lblChoice0 span').html(msg.d[0]);
    $('#lblChoice1 span').html(msg.d[1]);
    $('#lblChoice2 span').html(msg.d[2]);
    $('#lblChoice3 span').html(msg.d[3]);
    $('#lblChoice4 span').html(msg.d[4]);
  });
});

i {
  display: inline-block;
  width: 20px;
  background-color: red;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
  <a href="#" id="lblChoice0" class="list-group-item"><span>zero</span><i id="0" class="icon-volume-up icon-2x"></i></a>
  <a href="#" id="lblChoice1" class="list-group-item"><span>one</span><i id="1" class="icon-volume-up icon-2x"></i></a>
  <a href="#" id="lblChoice2" class="list-group-item"><span>two</span><i id="2" class="icon-volume-up icon-2x"></i></a>
  <a href="#" id="lblChoice3" class="list-group-item"><span>three</span><i id="3" class="icon-volume-up icon-2x"></i></a>
  <a href="#" id="lblChoice4" class="list-group-item"><span>four</span><i id="4" class="icon-volume-up icon-2x"></i></a>
</div>

<button id="try">Change</button>

我制作了红框代表你的图标。