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

Question

我在 razor 页面中使用 JS 从 foreach 中的列中获取动态 ID。

我以前用过这个，效果很好。但是，似乎它目前只是从第一个col中获取ID，无论我点击哪个col。

有人可以告诉我我是否还在这样做吗？或者如果我遗漏了什么。谢谢。

查看：

            <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 属性，它是硬编码的

id="requestId"

jQueryselect或$('#requestId')返回第一个，这是设计使然。

我会为每个按钮添加一个 data-id 并 select 具有该 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 结构和层次结构，因此 selector 不会经常中断。

Answer 2

当 id 属性 必须在 DOM 中唯一时，您的循环正在创建多个 #requestId 和 #paramModalBtn 元素.更改逻辑以改为使用 common 类。然后你可以遍历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 3

一旦每个项目都有一个按钮，您还可以将数据存储到按钮值属性中，这将导致在 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.: 值必须等于 @item.JobRequestId 像这样：<button class="glyphicon glyphicon-list-alt btn btn-primary" id="paramModalBtn" name="paramsBtn" value="@item.JobRequestId">Job 5</button>

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

data- attribute not working to grab dynamic id from foreach

javascript

asp.net-mvc

jquery

razor

razor-pages