javascript - 如何使用 javascript 和 jquery 排列元素中的文本

Question

我试图选择所有具有“名称”类的元素，当我单击一个单选按钮时，它会翻转姓氏和名字，因此:Hanks，Tom ||汤姆、汉克斯。这是我到目前为止所拥有的:

HTML:

<h1>Address Book</h1>

<p>Show Names as:</p>
<input name="lastfirst" value="last" type="radio">First, Last
<input name="firstfirst" value="first" type="radio">Last, First
<div>
    <table <thead="">
        <tbody>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </tbody>
        <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>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>

这是我的 jquery.我使用了 .hide() 填充符，因为除了选择元素之外，我不知道如何执行此操作。只需一些提示就会有所帮助。我不知道如何区分名字和姓氏。如果我能弄清楚如何简单地将名字和姓氏交换到变量中，我肯定可以弄清楚其余的事情。

$(document).ready(function(){
  $("input[name='lastfirst']").click(function(){
    $(".name").hide();
  });

  $("input[name='firstfirst']").click(function(){
    $(".name").hide();
  });
}); 

Answer 1

DEMO

$(document).ready(function () {
    $("input[name='change_last_first']:nth(0)").prop('checked', true)
    $("input[name='change_last_first']").change(function () {
        $(".name").text(function (_, old_txt) {
            var new_txt = old_txt.split(' ').reverse();
            return new_txt.toString().replace(',,', ' ') + ',';
        });
    });
});

HTML 已更改

<input name="change_last_first" value="last" type="radio">First, Last
<input name="change_last_first" value="first" type="radio">Last, First

引用文献

.text()

.change()

.replace()

.split()

.toString()

.reverse()