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

Question

我正在使用 Razor 构建面板(返回的许多项目的数量各不相同)，然后当单击面板时，我需要单击的 panelID，以便获得有关单击的面板的更多数据。 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" width="30" height="30" /></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 :(");
            }
        });

Answer 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(不应存在)的位置。