javascript - jQuery 只需要改变元素中的文本内容

Question

我有两个 li每个元素中有图标、文本的元素。我想在单击按钮时首先更改 li 图标和文本。目前，如果我使用 .text()，它会替换整个 anchor 标记内容。

$(document).ready(function(){
  $("#changeicon").click(function(){
    $("#listitems li:eq(0) a span").removeClass("ic1").addClass("ic3");
    //$("#listitems li:eq(0) a").text("Icon3");//Uncomment this line and check
  });
});

span {
  display:block;
  width:32px;
  height:32px;
}
.ic1 {
  background:url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-32.png") no-repeat;
}
.ic2 {
  background:url("https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/Grid-32.png") no-repeat;
}
.ic3 {
  background:url("https://cdn2.iconfinder.com/data/icons/4web-3/139/menu-32.png") no-repeat;
}
.ic4 {
  background:url("https://cdn3.iconfinder.com/data/icons/eightyshades/512/45_Menu-32.png") no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="listitems">
    <li>
        <a href="">
            <span class="ic1"></span>
            Icon1
            <span class="ic1"></span>
        </a>
    </li>
    <li>
        <a href="">
            <span class="ic2"></span>
            Icon2
            <span class="ic2"></span>
        </a>
    </li>
</ul>
<input type="button" id="changeicon" value="Change 1 to 3">

有什么方法可以只更改文本吗？

请不要向我提供类似 $("#listitems li:eq(0) a").html('<span class="ic3"></span>Icon3<span class="ic3"></span>') 的信息？我知道。

Answer 1

我想到的是将文本也放在某个元素中:

<li>
    <a href="">
        <span class="icon ic1"></span>
        <span class="text">Icon1</span>
        <span class="icon ic1"></span>
    </a>
</li>

然后在 JS 中做类似的事情:

$(document).ready(function(){
  $("#changeicon").click(function(){
    $("#listitems li:eq(0) a .icon").removeClass("ic1").addClass("ic3");
    $("#listitems li:eq(0) a .text").text("Icon3");
  });
});

可能还有更好的方法来做到这一点