数据属性无法从 foreach 中获取动态 ID
Posted
技术标签:
【中文标题】数据属性无法从 foreach 中获取动态 ID【英文标题】：data- attribute not working to grab dynamic id from foreach 【发布时间】：2020-05-30 09:16:16 【问题描述】：我在剃须刀页面中使用 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');
但我想我会包含整个脚本以防万一有人问。
【问题讨论】：
当id 属性在DOM 中必须是唯一的 时，您的循环将创建多个#requestId 元素。更改逻辑以改用类。然后你可以遍历 DOM 找到与被点击的按钮相关的元素
@RoryMcCrossan 所以只要给那个 col 一个唯一的类并在选择器中使用它？
你能用 col.attr('id');
@Jacked_Nerd 不要对所有这些使用相同的类。我已经添加了一个答案来给你一个工作示例
【参考方案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>【讨论】：
【参考方案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 结构和层次结构，因此选择器不会经常中断。
【讨论】：
这种方法与我发布的方法相似。如果有效，您应该将其标记为已接受（并忽略我的）。 :)【参考方案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>
【讨论】：
以上是关于数据属性无法从 foreach 中获取动态 ID的主要内容，如果未能解决你的问题，请参考以下文章
使用 SwiftUI ForEach 从 NSOrderedSet 获取字符串值
foreach属性-动态-mybatis中使用map类型参数，其中key为列名，value为列值