jQuery：当我有多个具有相同名称但唯一 id 的元素时，我可以按名称选择一个元素并读取它的 id 吗？
Posted
技术标签:
【中文标题】jQuery：当我有多个具有相同名称但唯一 id 的元素时，我可以按名称选择一个元素并读取它的 id 吗？【英文标题】：jQuery: Can I select an element by name and read it's id when I have multiple elements with the same name, but unique id? 【发布时间】：2021-11-14 16:37:55 【问题描述】：我有一个按钮列表，每个按钮都属于一个隐藏表单，对应的item.Id。我想在单击按钮时显示表单。为了实现这一点，我有一个 jQuery 脚本，它通过 name ($('[name="RequestSpeakButton"]')) 选择按钮并读取其 id 以了解将哪个隐藏表单设置为 visible ($("#RequestSpeak"+this.id).css("visibility", "visible"))。
当然，它不起作用。 IE。当我点击按钮时没有任何反应。
我不知道它是否重要，但document 由一个主视图和几个局部视图组成。该脚本位于主视图的脚本部分。按钮位于局部视图中，表单位于另一个局部视图中。
表单呈现如下（在局部视图中）：
@foreach (AgendaItemViewModel item in Model.Agenda)
<div id="RequestSpeak@(item.Id)" style="visibility:hidden;">
<form asp-action="Action">
<input type="hidden" name="Id" value="@item.Id" />
<button type="submit">
Yes
</button>
<span class="btn btn-danger" onclick="javascript: document.getElementById('RequestSpeak'+@item.Id).style.visibility='hidden'">
No
</span>
</form>
</div>
表单的输出如下所示：
<div id="RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d" style="visibility:hidden;">
<form action="/Controller/Action" method="post">
<input type="hidden" name="Id" value="57e33e17-c988-4a28-66a0-08d978345a1d" />
<button type="submit">
Yes
</button>
<span class="btn btn-danger" onclick="javascript: document.getElementById('RequestSpeak'+57e33e17-c988-4a28-66a0-08d978345a1d).style.visibility='hidden'">
No
</span>
</form>
</div>
应该显示表单的按钮呈现如下（在另一个局部视图中）：
@foreach (AgendaItemViewModel item in Model.Agenda)
<a name="RequestSpeakButton" id="@item.Id"
class="btn btn-primary">
Speak
</a>
输出如下所示：
<a name="RequestSpeakButton" id="57e33e17-c988-4a28-66a0-08d978345a1d"
class="btn btn-primary">
Speak
</a>
这是按钮的脚本：
$(document).ready(function ()
$('[name="RequestSpeakButton"]').click(function ()
alert("test"); /* Checking if the script runs. It doesn't. */
$("#RequestSpeak"+this.id).css("visibility", "visible")
);
)
我想，由于我有许多同名按钮，它们都被$('[name="RequestSpeakButton"]') 选中。我可以知道哪个被点击了吗？ this.Id够了吗？
如果我放弃name，然后只选择id 的按钮，也许它会起作用。但是后面我要添加其他的按钮，对items执行不同的操作，所以我需要名称才能知道执行哪个操作。
【问题讨论】：
尝试将一个通用类添加到<a> 并使用它，但你的$('[name="RequestSpeakButton"]') 应该可以工作。您是否检查过控制台是否有任何错误？
【参考方案1】：
试试这个：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</head>
<body>
<a name="RequestSpeakButton" id="57e33e17-c988-4a28-66a0-08d978345a1d"
class="btn btn-primary">
Speak1
</a>
<a name="RequestSpeakButton" id="57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d"
class="btn btn-primary">
Speak2
</a>
<div id="RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d" style="visibility:hidden;">
<form action="/Controller/Action" method="post">
<input type="hidden" name="Id" value="57e33e17-c988-4a28-66a0-08d978345a1d" />
<button type="submit">
Yes
</button>
<span class="btn btn-danger" onclick="document.getElementById('RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d').style.visibility='hidden'">
No
</span>
</form>
</div>
<div id="RequestSpeak57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d" style="visibility:hidden;">
<form action="/Controller/Action" method="post">
<input type="hidden" name="Id" value="57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d" />
<button type="submit">
Yes
</button>
<span class="btn btn-danger" onclick="document.getElementById('RequestSpeak57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d').style.visibility='hidden'">
No
</span>
</form>
</div>
<script>
$("[name='RequestSpeakButton']").click(function()
var thisid = $(this).attr("id");
$("#RequestSpeak"+thisid).css("visibility", "visible")
)
</script>
</body>
</html>
或者你更喜欢这个？
@model WebApplication1.Models.TestModel
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
@foreach (AgendaItemViewModel item in Model.Agenda)
<div id="RequestSpeak@(item.Id)" style="visibility:hidden;">
<form asp-action="Action">
<input type="hidden" name="Id" value="@item.Id" />
<button type="submit">
Yes
</button>
<span class="btn btn-danger" name="noBtn">
No
</span>
</form>
</div>
@foreach (AgendaItemViewModel item in Model.Agenda)
<a name="RequestSpeakButton" id="@item.Id"
class="btn btn-primary">
Speak
</a>
<script>
$("[name='RequestSpeakButton']").click(function ()
var thisid = $(this).attr("id");
$("#RequestSpeak" + thisid).css("visibility", "visible")
)
$("[name='noBtn']").click(function ()
var thisid = $(this).parent().parent().css("visibility", "hidden");
)
</script>
【讨论】：
这行得通。一次。我可以打开任何对话框，然后再次关闭它。但是我无法打开另一个。 感谢您的回复，是否有任何错误消息，或者您能否提供更多代码来帮助我重现您的问题？ 我刚刚发现。按钮所在的局部视图每 3 秒自动刷新一次。刷新后，按钮由于某种原因不起作用。你的解决方案很好！ :) 是的，很高兴能帮到你，编码愉快：)【参考方案2】：document.getElementById('RequestSpeak'+57e33e17-c988-4a28-66a0-08d978345a1d)
可能不是你想要的。这甚至可能会引发错误，因为它不是正确的字符串。如果你把它全部改成这样的引号，它至少应该让你朝着正确的方向迈出一步：
document.getElementById('RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d')
要将您的视图模板更改为 item.id 但在引号中。
document.getElementById('RequestSpeak'+'@item.Id')
看看能不能解决问题。
【讨论】：
以上是关于jQuery：当我有多个具有相同名称但唯一 id 的元素时，我可以按名称选择一个元素并读取它的 id 吗？的主要内容，如果未能解决你的问题，请参考以下文章
当多个输入具有相同名称时，根据输入类型设置 jquery 表单验证