数据属性无法从 foreach 中获取动态 ID

Question

我在剃须刀页面中使用 JS 从 foreach 中的 col 获取动态 ID。

在过去，我使用过它并且效果很好。但是，无论我点击哪一个，它似乎目前都只从第一个 col 中获取 ID。

有人可以告诉我我是否仍然这样做正确吗？或者，如果我遗漏了什么。谢谢。

查看：

            <div class="list-group container" id="JobRequestMonitorTable">
            <div class="row list-group-item list-group-item-heading container divTableHeading" style="margin-bottom:0px;">
                <div class="col-md-4"> Job Code </div>
                <div class="col-md-4"> Description </div>
                <div class="col-md-2"> Schedule </div>
                <div class="col-md-1"> Running </div>
                <div class="col-md-1"></div>
            </div>
            @if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
            {
                <div class="row list-group-item-danger">
                    <div class="col-md-1 text-center">@ViewBag.ErrorMessage</div>
                </div>
            }
            @foreach (var item in Model.JobRequests)
            {
                <div class="row list-group-item container">
                    <div class="hidden" data-id="@item.JobRequestId" id="requestId">@item.JobRequestId</div>
                    <div class="col-md-4">@item.JobCode</div>
                    <div class="col-md-4">@item.Description</div>
                    <div class="col-md-2">@item.Schedule</div>
                    @if (@item.IsRunning == true)
                    {
                        <div class="col-md-1" style="margin-left:25px;"><span class="glyphicon glyphicon-ok"></span></div>
                        <div class="col-md-1"></div>
                    }
                    else
                    {
                        <div class="col-md-1"></div>
                        <div class="col-md-1">
                            <button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn"></button>
                        </div>
                    }
                </div>
            }
        </div>

JS：

        $("button").click(function () {

            var col = $('#requestId');
            var jobRequestId = col.data('Id');

             $.ajax({
                url: '@Url.Action("JobPollerParameters", "Tools")',
                 data: { "jobRequestId": jobRequestId},
                 success: function (results) {

                    $modal = $('#paramsModal');
                    $modal.modal("show");               

                     var arr = results;
                     //loop through arr created from dictionary to grab key(s)
                     for (var key in arr) {
                         if (arr.hasOwnProperty(key)) {
                             var myKey = key;
                         }
                     }

                     var name = myKey;
                     var value = results[myKey];

                    $('#modalName').text(name);
                     $('#modalMessage').text(value);

                }
            });
        });

真正在 JS 中看到的唯一重要部分是 var col = $('#requestId'); var jobRequestId = col.data('Id');

但我想我会包含整个脚本以防万一有人问。

Answer 1

当id 属性在DOM 中必须是唯一的时，您的循环将创建多个#requestId 和#paramModalBtn 元素。更改逻辑以改用通用类。然后您可以遍历 DOM 以找到与单击的按钮相关的元素。试试这个：

$("button").click(function() {
  var $col = $(this).closest('.row').find('.requestId');
  var jobRequestId = $col.data('id');
  console.log(jobRequestId);
  
  // AJAX request...
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<div class="row list-group-item container">
  <div class="hidden requestId" data-id="foo-bar">Job #1</div>
  <!-- other content... -->
  <div class="col-md-1">
    <button class="glyphicon glyphicon-list-alt btn btn-primary" name="paramsBtn"></button>
  </div>
</div>

<div class="row list-group-item container">
  <div class="hidden requestId" data-id="lorem-ipsum">#Job #2</div>
  <!-- other content... -->
  <div class="col-md-1">
    <button class="glyphicon glyphicon-list-alt btn btn-primary" name="paramsBtn"></button>
  </div>
</div>

Answer 2

循环中的所有项目都获得相同的id 属性，它是硬编码的

id="requestId"

jQuery 选择器 $('#requestId') 正在恢复第一个选择器，这是设计使然。

我会在每个按钮上添加一个data-id 并选择具有该 ID 的相关列。

例如按钮会得到：

<button data-col-id="@item.JobRequestId" class="glyphicon glyphicon-list-alt btn btn-primary"></button>

然后，很容易在点击时获取该信息：

$("button").click(function () {

            var jobRequestId = $(this).data('col-id');

             $.ajax({
                url: '@Url.Action("JobPollerParameters", "Tools")',
                 data: { "jobRequestId": jobRequestId},
                 success: function (results) {

                    $modal = $('#paramsModal');
                    $modal.modal("show");               

                     var arr = results;
                     //loop through arr created from dictionary to grab key(s)
                     for (var key in arr) {
                         if (arr.hasOwnProperty(key)) {
                             var myKey = key;
                         }
                     }

                     var name = myKey;
                     var value = results[myKey];

                    $('#modalName').text(name);
                     $('#modalMessage').text(value);

                }
            });
        });

我喜欢这个解决方案，因为您不依赖于您的 HTML 结构和层次结构，因此选择器不会经常中断。

Answer 3

一旦你为每个项目设置了一个按钮，你还可以将数据存储到按钮的 value 属性中，这样在 JS 中实现了一个简单的实现：

$("button").click(function (e) {

    var jobRequestId = $(e.target).val();
    console.log(jobRequestId);

    $.ajax({
        url: '@Url.Action("JobPollerParameters", "Tools")',
         data: { "jobRequestId": jobRequestId},
         success: function (results) {

            $modal = $('#paramsModal');
            $modal.modal("show");               

             var arr = results;
             //loop through arr created from dictionary to grab key(s)
             for (var key in arr) {
                 if (arr.hasOwnProperty(key)) {
                     var myKey = key;
                 }
             }

             var name = myKey;
             var value = results[myKey];

            $('#modalName').text(name);
             $('#modalMessage').text(value);

        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="1">Job 1</button><br />
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="2">Job 2</button><br />
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="3">Job 3</button><br />
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="4">Job 4</button><br />
<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="5">Job 5</button>

Obs.: value 必须等于 @item.JobRequestId 就像这样：<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="@item.JobRequestId">Job 5</button>