Question

在MVC项目的视图中，我想显示每个玩家的名字。玩家通过团队ID与团队相关联，我循环遍历列表中的团队，并显示玩家的profileID和其他字段。

在视图中的表格中预告：

@foreach (var item in Model.ListPlayers)
{
   <tr>
        <td>@item.TeamID</td>
        <td>
            <div class="profileID" id="profileID">
                <a href="/Profile/@item.ProfileID" class="list-group-item">@item.ProfileID</a>
                <div class="nameSection" id="nameSection">
                    <h6>Name:</h6>
                    <div id="nameDisplay"></div>
                </div>
            </div>
        </td>
        <td>@item.Weight</td>
        <td>@item.Jersey</td>
    </tr>
}

使用jQuery .each函数，我循环遍历DOM中的profileID，并调用getNameDetail函数。我的jQuery脚本如下：

<script>
    $(document).ready(function () {
        $(".nameSection").hide();
        var profID;

        $('.profileID').each(function () {
            profID = $('a', this).text();
            getNameDetail();
            $('#nameSection').show().insertAfter(this);

            function getNameDetail() {
                $.ajax({
                    url: "/profile/GetNameByProfileID/" + profID,
                    type: 'POST',
                    data: { profileID: profID },
                    success: function (data) {
                        alert(data);
                        $("#nameDisplay").empty().append(data);
                    },
                    error: function (xhr, status, error) {
                        alert("name detail was populated error");
                    }

                });
            }
        });
    });

我正确地提取了profileID，来自getNameDetail的数据也是正确的。但是没有正确进入#nameSection部分。即我的

有问题

 $('#nameSection').show().insertAfter(this);

我想要显示的结果：

配置文件ID：12345 名称：firstname1 lastname1

配置文件ID：12359 名称：firstname2 lastname2

等

有人请帮忙吗？

Answer 1

我不确定你的输出是从上面得到的，但我猜这个问题是因为你的nameSection不是唯一的，当你的ajax调用返回一些数据时，jquery将执行搜索nameSection id的文档，并随机选择一个以分配数据。我认为解决方案是使nameSection id对于每个块都是唯一的，或者像使用锚标记中的文本选择一样，使用它作为选择的上下文或{{1}元素。您可能希望首先将nameSection变量分配给this，以便ajax函数可以引用它。所以解决方案可能是1）

that

变为

<div class="nameSection" id="nameSection">
...
<div id="nameDisplay"></div>

（只是将id粘贴在每个id的末尾），然后在每个块中，这个

<div class="nameSection" id="nameSection@item.ProfileID">
...
<div id="nameDisplay@item.ProfileID"></div>

变为

$('#nameSection').show().insertAfter(this);
....
$("#nameDisplay").empty().append(data);

Answer 2

我根据你的建议做了一些改变。＆＃34; nameSection＆＃34; id仅使用profileID，因此填充表的foreach循环如：

Thread.sleep(MS);

，jQuery如下：

   @foreach (var item in Model.ListPlayers)
    {

        <tr>
            <td>@item.TeamID</td>
            <td>
                <div class="profileID" id="profileID">
                    <a href="/Profile/@item.ProfileID" class="list-group-item">@item.ProfileID</a>
                    <div class="nameSection" id="@item.ProfileID">
                    </div>
                </div>
            </td>
            <td>@item.Weight</td>
            <td>@item.Jersey</td>
        </tr>
    }

它可以在每个函数内部使用alert（profID）。如果我删除警报（profID），则nameSections为＆＃34; no show＆＃34;。我无法弄清楚为什么？

Answer 3

警报将使代码工作的原因是它会减慢速度。 ajax调用将以异步方式进行，但如果有警报，它将给出调用时间并返回结果。我猜测，为什么没有在nameSections上设置值，因为profID不在each函数之内。在正常速度下（没有警报），for循环将压缩，每次更改profID。然后在某些时候，ajax调用将在profID更改很久之后开始返回结果。

使用您在那里的代码，我们是否可以在var profID;之外注释掉each，并在var内profID添加each循环？

jQuery循环遍历团队列表，并在循环期间获取名称并插入DOM

3 个答案: