更改按钮文本而不更改按钮图标

Question

我有下一个按钮：

$('.change-button-text').click(function(){
  $('.target-chooser').html('Edit target');
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success btn-next target-chooser" type="button">
  Choose target
  <i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button">
  Change button text
</button>

如何在不丢失按钮图标的情况下更改文本？

Answer 1

最简单的方法是将文本包装在 a 中span，然后定位该元素。

假设您无法修改 HTML，那么您可以使用contents()和filter()来检索文本节点，然后再更改它的textContent. 尝试这个：

$('.change-button-text').click(function() {
  $('.target-chooser').contents().filter(function() {
    return this.nodeType == 3 && this.textContent.trim();
  })[0].textContent = 'Edit target ';
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-success btn-next target-chooser" type="button">
  Choose target
  <i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button">
  Change button text
</button>