如何在点击时获取面板的ID，当面板ID是动态生成的

Posted 2023-04-12

【中文标题】如何在点击时获取面板的ID，当面板ID是动态生成的

【英文标题】：How to get the ID of a panel when clicked, when panel ID is dynamically generated

【发布时间】：2018-06-19 21:36:45

【问题描述】：

我正在使用 Razor 构建面板（返回的许多项目的数量各不相同），然后当单击面板时，我需要单击的面板 ID，以便我可以获得有关单击的面板的更多数据。 jquery/javascript 的新手。我已经捕获了 panelID，所以我知道它被分配给了面板，以及 paneltextID。

下面是包含面板和 javascript 的 div：

                        @for (int i = 0; i < @rows; i++)
                        
                            <div class="row">

                           @for (int j = 0; j < @cols; j++)
                                 if(panelCount <= totalCount)
                                sqlCommand = "SELECT FullDescription AS Description FROM shmr.RemoteSQLDatabases WHERE DBID1 = " + @panelCount + " ORDER BY DBName";
                                //<p>@sqlCommand</p>

                                //This grid contains the information for the specific database of this panel
                                var Grid2 = new WebGrid(DB.Query(sqlCommand));
                                //var DBName = DB.Query(sqlCommand);
                                 DBName = DB.QueryValue("SELECT DBName FROM shmr.RemoteSQLDatabases WHERE DBID1 = " + @panelCount + " ORDER BY DBName");

                                string panelID =null;
                                panelID = "panel" + panelCount.ToString();
                               // <p>Panel is @panelID</p>

                                <div class="col-md-3">

                                    <div id= @panelID class='panel panel-success',  style="display: inline-block">
                                        <div class='panel-heading text-center'><b>@DBName </b><img src="~/Images/Doctor (2).png" align="left"   /></div>
                                        <div class="panel-body m200">

                                           @if(Grid2 !=null)
                                            

                                                <text> @Grid2.Gethtml(columns:Grid2.Columns(Grid2.Column("Description")))</text>

                                                <input type="hidden" name="paneltextID" value=@panelCount>
                                                <p>PanelID = @panelID</p>

                                            
                                            else
                                            <text>No data was found to display!</text>
                                            
                                        </div>
                                        <div class="panel-footer text-center">
                                            Database status as of @DT
                                        </div>
                                    </div>




                                </div>
                                 panelCount = panelCount + 1;
                                    
                                
                            </div>
                        

    </div>

        $(".panel").click(function () 
            var panelID = $('#panelID').val();
            if (panelID != null) 
                alert("Panel " + panelID + " clicked! :)");
             else 
                alert("PanelID is null :(");
            
        );

【问题讨论】：

var panelID = this.id;

【参考方案1】：

您不必将其设为 id。只需这样做：

<div class="panel panel-success" data-id=@panelId ...>

然后在你的 jquery 中你可以这样做：

$(".panel").click(function () 
        var panelID = $(this).data('id');
        if (panelID != null) 
            alert("Panel " + panelID + " clicked! :)");
         else 
            alert("PanelID is null :(");
        
    );

代码中的实际错误是您在 javascript 中查找#panelId（不应该存在）的位置。

【讨论】：

感谢亚当，做到了！虽然我花了一天时间试图弄清楚这一点，但你在大约 20 秒内回答了它……太棒了！

【参考方案2】：

尝试设置面板属性的 ClientIDMode = Static。