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?jQuery：当我有多个具有相同名称但唯一 id 的元素时，我可以按名称选择一个元素并读取它的 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"]') 应该可以工作。您是否检查过控制台是否有任何错误？

标签： c# jquery asp.net-core-mvc

【解决方案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')

看看能不能解决问题。

【讨论】：