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

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

执行此操作的最简单方法是将文本包装在 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>