jQuery：当我有多个名称相同但 ID 唯一的元素时，我可以按名称 select 一个元素并读取它的 ID 吗？

Question

我有一个按钮列表，每个按钮都属于一个隐藏的表单，对应 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 选择按钮，也许它会起作用。但我稍后会添加其他按钮，这些按钮将对 item 执行不同的操作，因此我需要名称才能知道要执行哪个操作。

Answer 1

document.getElementById('RequestSpeak'+57e33e17-c988-4a28-66a0-08d978345a1d)

可能不是您想要的。这甚至可能会引发错误，因为它不是正确的字符串。如果你把它改成像这样全部在引号内，它至少应该让你朝着正确的方向迈出一步：

document.getElementById('RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d')

要实现这一点，请将您的视图模板更改为 item.id 但在引号中。

document.getElementById('RequestSpeak'+'@item.Id')

看看是否能解决问题。

Answer 2

试试这个：

<!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>

jQuery：当我有多个名称相同但 ID 唯一的元素时，我可以按名称 select 一个元素并读取它的 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?

c#

jquery

asp.net-core-mvc