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

Question

我有下一个按钮：

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

<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>

Answer 2

您可以在按钮内使用span标签：

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

<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" data-target-id="">
  <span>Choose target</span>
  <i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button" data-target-id="">
  Change button text
</button>

或者如果您不想使用span标签：

$('.change-button-text').click(function(){
  $('.target-chooser').html('Edit targer <i class="ace-icon fa fa-arrow-right"></i>');
});

<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" data-target-id="">
  Choose target
  <i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button" data-target-id="">
  Change button text
</button>

Answer 3

在span中添加按钮文本并将选择器更改为#selector>span，如下所示：

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

<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" data-target-id="">
  <span>Choose target</span>
  <i class="ace-icon fa fa-arrow-right"></i>
</button>
<button class="change-button-text" type="button" data-target-id="">
  Change button text
</button>

或者，如果您不想使用span，请使用以下内容：

var newText = 'Edit targer';
$('.target-chooser>span').html(newText+'<i class="ace-icon fa fa-arrow-right"></i>');

Answer 4

尝试使用JavaScript元素属性。但这不是通用修复。

$('.target-chooser')[0].firstChild.data = 'Edit targer';

代码段：

$('.change-button-text').click(function(){
  $('.target-chooser')[0].firstChild.data = 'Edit targer ';
});

<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 5

你也可以这样做

$(.target-chooser).empty();
$(.target-chooser).append('<i class="ace-icon fa fa-arrow-right"></i> Edit target')

在这里，您还可以更改图标本身