我如何告诉 ajax 选择从列表中单击的项目答案

【问题标题】：How do i tell ajax to select the item clicked from a list我如何告诉 ajax 选择从列表中单击的项目
【发布时间】：2021-10-05 18:42:12
【问题描述】：

我正在尝试列出正在休假的人员，我想在单击“Data de Regresso”链接时计算他们的返回日期。我设法做到了，但是当我单击列表中的任何按钮时，它总是传递列表中的第一个 ID，而不是我单击的项目的 ID。我对此有点陌生。我真的很感激任何帮助。我正在使用 asp.net 框架 MVC 5。

这里是查看代码：

<div class="col-4">
    <div class="card">
        <div class="card-header text-white" style="background-color: #4d4d4f;">
            Férias
        </div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <td>Nome</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    @if (Model.PessoasDFVM.Count == 0)
                    {
                        <tr>
                            Ninguém de férias.
                        </tr>
                    }
                    else
                    {
                        foreach (PortalInternoBBG.Web.Models.HomePage.PessoaDFVM pessoaDeFerias in Model.PessoasDFVM)
                        {
                            <tr>
                                <td>@pessoaDeFerias.Nome</td>
                                <td>
                                    <div id="ResponseDiv">
                                        <a href="#" onclick="GetDataDeRetorno('@pessoaDeFerias.IDstring')">
                                            Data de Regresso
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        }
                    }
                </tbody>
            </table>
        </div>
    </div>

还有ajax函数：

    function GetDataDeRetorno(id) {
        var stringID = id;
        $.ajax({
            url: urlCalculaDataDeRetorno,
            data: { "id": stringID },
            type: "POST",
            success: function (data) {
                $('#ResponseDiv').replaceWith("<div>" + data + "</div>");
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }

【问题讨论】：

您附加的代码似乎没问题。但是，您能否检查一下您的 Model.PessoasDFVM 是否为列表中的每个项目获得了唯一的 ID 字符串？请在 foreach 循环中保留 div id="ResponseDiv" 到 div class="ResponseDiv" 否则它将为每个 div 生成相同的 id。
你是对的。使用 div id="ResponseDiv" 它总是发送第一个未点击的 Id，但是当我更改为 div class="ResponseDiv" 它发送正确的 id 但它不会将内容替换为 div。即使代码运行没有任何错误，它也保持不变......
将 Ajax 响应从 $(#ResponseDiv) 更改为 $(.ResponseDiv) 并且当我单击其中一个时，它只会使用与该 ID 对应的日期更新所有其他项目，而不仅仅是我的那个点击。

标签： javascript asp.net ajax razor

【解决方案1】：

使用唯一的 Id 附加 div 类，以便您在它的帮助下更改 ajax 响应中的 div 数据。

请在html中更改以下代码。

<div class="ResponseDiv_@pessoaDeFerias.IDstring">
   <a href="#" onclick="GetDataDeRetorno('@pessoaDeFerias.IDstring')">
   Data de Regresso
   </a>
</div>

并使用下面的代码在 ajax 中成功

success: function (data) {
                $('.ResponseDiv_' +stringID).replaceWith("<div>" + data + "</div>");
            }

【讨论】：