jQuery。當我有多個元素有相同的名字，但唯一的ID時，我可以通過名字選擇一個元素并讀取它的ID嗎？ -有解無憂

我有一個按鈕的串列，每個按鈕都屬于一個隱藏的表單，并有相應的item.Id。我想在按鈕被點擊的時候顯示該表單。為了達到這個目的，我有一個jQuery腳本，它通過name（$('[name="RequestSpeakButton"]')）來選擇按鈕，并讀取它的id來知道哪個隱藏表單需要設定為visible（$("#RequestSpeak " this.id).css（"visibility", "visible"））。

但是當然，它沒有作業。也就是說，當我點擊按鈕的時候，什么都沒有發生。

我不知道這是否重要，但是檔案由一個主視圖和幾個區域視圖組成。腳本位于主視圖的 scripts 部分。按鈕在一個區域視圖中，表單在另一個區域視圖中。

表單是這樣呈現的（在一個區域視圖中）：

@foreach (AgendaItemViewModel itemin Model. Agenda)
{ 
    <div id="RequestSpeak@（ item. Id)" style="visibility:hidden;">
        <form asp-action="Action"/span>>
            < input type="hidden" name="Id" value="@item。 Id" />
            <button type="submit"> 
                有
            </button> Yes
            <span class="btn btn-danger"/span> onclick="javascript: document. getElementById('RequestSpeak' @item.Id).style.visibility='hidden'"/span>>
                沒有
            </span> 
        </form>/span>
    </div>>
}

表單的輸出看起來是這樣的：

< div id="RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d" style="visible: hidden;">
    < form action="/Controller/Action" method="post"> 
        < input type="hidden" name="Id" value="57e33e17-c988-4a28-66a0-08d978345a1d" /> 
        <button type="submit"> 
            有
        </button> Yes
        <span class="btn btn-danger"/span> onclick="javascript: document. getElementById('RequestSpeak' 57e33e17-c988-4a28-66a0-08d978345a1d).style.visibility='hidden'"/span>>
            沒有
        </span>沒有
    </form>/span>
</div>/span>

應該顯示一個表單的按鈕是這樣呈現的（在另一個區域視圖中）：

@foreach (AgendaItemViewModel item  in Model. Agenda)
{
    < a name="RequestSpeakButton" id="@item。 Id"
       class="btn btn-primary">/span>
      說話
    </a>/span>
}

而輸出結果看起來是這樣的：

< a name="RequestSpeakButton" id="57e33e17-c988-4a28-66a0-08d978345a1d"
   class="btn btn-primary"/span>>
   說話
</a>/span>

這是按鈕的腳本：

$(document).ready(function () {
    $('[name="RequestSpeakButton"]').click(function () { 
        alert("test"); /* checking if the script runs. 它沒有。*/
        $("#RequestSpeak"/span> this.id)。 css("visibility", "visible")
    });
})

我想，由于我有許多同名的按鈕，它們都被$('[name="RequestSpeakButton"]')選中。我可以知道哪一個被點擊了嗎？this.Id是否足夠？

如果我去掉name，而只是通過id來選擇按鈕的話，也許會奏效。但是我將在以后添加其他的按鈕，這將對items執行不同的操作，所以我需要名稱來知道執行哪種操作。

uj5u.com熱心網友回復：

試試這個：

<! DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8">/span>
        <title></title> 
        <script src="https://code.jquery. com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
         crossorigin="anonymous">/span></script>/span>
    </head> 
    <body> 
        < a name="RequestSpeakButton" id="57e33e17-c988-4a28-66a0-08d978345a1d"
           class="btn btn-primary"/span>>
           說話1
        </a>
        < a name="RequestSpeakButton" id="57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d"
           class="btn btn-primary"/span>>
           說話2
        </a>講2
        
        < div id="RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d" style="visible: hidden;">
            < form action="/Controller/Action" method="post"> 
                < input type="hidden" name="Id" value="57e33e17-c988-4a28-66a0-08d978345a1d" /> 
                <button type="submit"> 
                    有
                </button> Yes
                <span class="btn btn-danger"/span> onclick="document. getElementById('RequestSpeak57e33e17-c988-4a28-66a0-08d978345a1d').style.visibility='hidden'"> 
                    沒有
                </span> 
            </form>/span>
        </div>/span>
        < 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"> 
                    有
                </button> Yes
                <span class="btn btn-danger"/span> onclick="document. getElementById('RequestSpeak57exxx7-cxx8-4x8-6xx0-08xxxxxxa1d').style.visibility='hidden'"> 
                    沒有
                </span> 
            </form>/span>
        </div>/span>
        <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">/span></script>/span>

@foreach (AgendaItemViewModel item in Model.Agenda)
{
    <div id="RequestSpeak@(item. Id)" style="visibility:hidden;">
        <form asp-action="Action"/span>>
            < input type="hidden" name="Id" value="@item. Id" />
            <button type="submit"> 
                有
            </button> Yes
            < span class="btn btn-danger" name="noBtn"> 
                沒有
            </span> 沒有
        </form>/span>
    </div>/span>
}

@foreach (AgendaItemViewModel item in Model.Agenda)
{
    <a name="RequestSpeakButton"/span> id="@item. Id"
       class="btn btn-primary">/span>
        說話
    </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>>

uj5u.com熱心網友回復：

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

這可能不是你想要的。因為它不是一個合適的字串，所以甚至應該拋出一個錯誤。如果你把它改成像這樣的引號，它至少應該讓你在正確的方向上邁出一步：

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

為了得到這一點，將你的視圖模板改為 item.id，但要加引號。

document. getElementById('RequestSpeak'/span> '@item.Id'/span>)

然后看看這是否能解決問題。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/331841.html

標籤：

上一篇：寬度為100%的CSS表格，列寬因內容而異

下一篇：我如何在C 中列印一個三角形的數字？