Javascript 使用jquery反转名字和姓氏
试着拿下这个表并记下名字,当我点击一个单选按钮时,它会把名字从:Tom Hanks改为Hanks,Tom。以下是html:Javascript 使用jquery反转名字和姓氏,javascript,jquery,Javascript,Jquery,试着拿下这个表并记下名字,当我点击一个单选按钮时,它会把名字从:Tom Hanks改为Hanks,Tom。以下是html: <h1>Address Book</h1> Show Names as: <input name="change_last_first" value="last" type="radio">First, Last <input name="change_last_first" value="first" type="radio"&
<h1>Address Book</h1>
Show Names as:
<input name="change_last_first" value="last" type="radio">First, Last
<input name="change_last_first" value="first" type="radio">Last, First
<div>
<table <thead="">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</tbod
<tbody>
<tr>
<td>9001</td>
<td class="name">Tom Hanks</td>
<td>tomhanks@moviestars.com</td>
</tr>
<tr>
<td>9002</td>
<td class="name">Bruce Willis</td>
<td>brucewillis@moviestars.com</td>
</tr>
<tr>
<td>9003</td>
<td class="name">Jim Carrey</td>
<td>jimcarrey@moviestars.com</td>
</tr>
<tr>
<td>9004</td>
<td class="name">Tom Cruise</td>
<td>tomcruise@moviestars.com</td>
</tr>
<script>
</script>
</tbody>
</table>
</div>
<meta charset="utf-8">
<title>Interview Test</title>
<link rel="stylesheet" href="./webassets/style.css" media="screen" type="text/css">
<h1>Company Staff List</h1>
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>9001</td>
<td>Tom Hanks</td>
</tr>
<tr>
<td>9002</td>
<td>Bruce Willis</td>
</tr>
<tr>
<td>9003</td>
<td>Jim Carrey</td>
</tr>
<tr>
<td>9004</td>
<td>Tom Cruise</td>
</tr>
</tbody>
</table>
</div>
您需要
返回结果。另外,由于您使用的是text
的函数arg语法,请将函数的第二个参数用于当前文本
$(".name").text(function(_, cur) {
return curText.split(/\s+|,/).reverse();
});
另一种简单的处理方法是假设名称的一般格式是First-Last
或Last,First
:
$("input[name='change_last_first']").change(function () {
var arr = [" ", ","],
sep = this.value === 'first' ? 0 : 1;
$(".name").text(function (_, curText) {
return curText.split(arr[sep % 2]).reverse().join(arr[(sep + 1) % 2]);
});
});
为此,您需要用空格拆分全名,然后可以使用reverse()
注意:因为reverse()
是数组实例的一种方法。它不会直接作用于字符串。您应该首先将字符串中的字符拆分为一个数组,反转该数组,然后重新合并为一个字符串
$("input[name='change_last_first']").click(function () {
$(".name").each(function() {
var revName = $(this).text().split(" ").reverse().join(" ");
$(this).text(revName);
});
});
用两个选项更新了答案。查看演示。我对如何将名称从Tom Hanks更改为Hanks、Tom和backwards提出了一个小小的要求。@thetao这就是第二个演示将提供给您的内容。@thetao这是排列组合的第三个选项:)。。。试试这个链接。
$("input[name='change_last_first']").click(function () {
$(".name").each(function() {
var revName = $(this).text().split(" ").reverse().join(" ");
$(this).text(revName);
});
});