更改文本，但不更改按钮内的图标

Question

我有一个带有图标的export const TodoStore = types .model("TodoStore", { todos: types.array(Todo), }) .actions(self => ({ changeToShoppingType: (todo) => { const snap = getSnapshot(todo); console.log("snapshot: ", snap); const newSnap = {}; Object.assign(newSnap, snap, { type: "shopping" }); console.log("newSnap: ", newSnap); self.todos.splice(self.todos.indexOf(todo), 1, newSnap); } })); ，该图标如下所示，它们是使用引导程序和超棒的字体创建的

button

使用jQuery，我希望更新文本“收藏夹”而不触摸<button id="btnFavorite" class="btn btn-warning pull-right" style="margin-right: 5px;" onclick="addToFavorites()"> <i id="imgFavorite" class="fa fa-star"></i> Favorite </button> 部分。

当我检查<i id="imgFavorite" class="fa fa-star"></i>时，我会得到“收藏夹”，但是当我使用$("#btnFavorite").text()时，这不仅会更新文本，还会删除$("#btnFavorite").text("Some value")部分。

我尝试了<i id="imgFavorite" class="fa fa-star"></i>，但这根本不会改变文本。

如何更新文本，但同时保留图标？

Answer 1

jQuery .text()将剥离html标签。

如果需要处理html，请使用.html()。

$('#btnFavorite').html(function() {
  return $(this).html().replace($(this).text(), 'Some value');
});

Answer 2

最简单的解决方案是将按钮文本放在一个跨度中，然后选择跨度。

function addToFavorites() {
  $('#btnFavorite span').text('Some value');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" crossorigin="anonymous">
<button id="btnFavorite" class="btn btn-warning pull-right" style="margin-right: 5px;" onclick="addToFavorites()"><i id="imgFavorite" class="fa fa-star"></i>  <span>Favorite</span></button>

---

如果您无法编辑HTML并且只想使用jQuery，那么这也是一个选择：

function addToFavorites() {
  $('#btnFavorite').contents().filter(function() {
    return this.nodeType == 3 && this.textContent.trim();
  })[0].textContent = ' Some text';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" crossorigin="anonymous">
<button id="btnFavorite" class="btn btn-warning pull-right" style="margin-right: 5px;" onclick="addToFavorites()"><i id="imgFavorite" class="fa fa-star"></i>  Favorite</button>

Answer 3

只需在 div 内放置按钮文字：

$('body').append("<button id='btnFavorite' class='btn btn-warning pull-right' style='margin-right: 5px;' onclick='addToFavorites()'><i id='imgFavorite' class='fa fa-star'></i> <div class='btn_txt'>Favorite</div> </button>")

以及样式：

$('.btn_txt').css('font-size', '20px').css('display', 'inline')

结果：