javascript - 使用 jquery 单击 td 元素时更改其文本

Question

我在输出中获取 Json 数据，并使用编辑选项附加到表中，所以我想要的是，当单击 td 的编辑时，单击的 td 元素文本应从“编辑”更改为“保存”，当单击“保存”时' 再次更改为编辑，但有时一个 td 元素应从“编辑”更改为“保存”，一次只有一个“保存”应处于事件状态，而其他元素仍保持“编辑”。

<table class="append_data">
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
        <th>Action</th>
    </tr>
</table>

//获取数据的脚本:

$.ajax({
            url: "<?= base_url('controller/get_users') ?>",
            type: 'POST',
            data: {
            },
            success: function (myJSON) {
                var output = myJSON;  
                var html = '';
                $.each(output, function (key, value) {
                    html += '<tr>';
                    html += '<td>' + value.name + '</td>';
                    html += '<td>' + value.mobile + '</td>';
                    html += '<td>' + value.id + '</td>';
                    html += '<td><a href="javascript:void(0);" style="text-decoration:none;" class="edit_user" data-id="' + value.id + '"><span class="change_res' + value.id + '">Edit</span></a></td>';
                    html += '</tr>';
                });
                $('.append_data tbody').append(html);
                      },
            error: function (xhr) {
                alert(xhr.status);
            }
        });

//更改文本的脚本

 $("body").on('click', '.edit_user', function () {
        var userid = $(this).attr("data-id");
        $(this).text('Save').siblings().text('Edit');

    });

获取输出:

预期输出:

Answer 1

你可以试试

$("body").on('click', '.edit_user', function () {
     var userid = $(this).attr("data-id");
     $('.edit_user').not(this).text('Edit');  // back all the edit_user to Edit but not this
     $(this).text(($(this).text().trim() == 'Save') ? 'Edit' : 'Save'); // change the text for this between Edit or Save
});

说明:

• $('.edit_user').not(this).text('Edit');将所有其他元素文本恢复为编辑

• $(this).text().trim() == '保存') ? 'Edit' : 'Save' 是 if 语句的简写方法.. 意味着如果元素的文本是 Save 将其设置为 Edit，反之亦然.. 以及关于 .trim() 此处用于双重检查文本是否与字符串完全相同