Question

我正在使用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" 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（不应该存在）的地方。

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

1 个答案: