Question

当我点击任何面板时，如何动态地将数据显示到引导程序面板中？当我点击每个面板时，数据只显示在第一个面板中。

索引

 <div class="panel panel-info class" style="height: 450px; width: 300px; overflow-y:scroll;">
       @foreach (var item in lstCategory)
       {
            <div class="panel-heading" id="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" onclick="collapse(@item.Id);" data-parent="#accordion" href="#@item.Id">@item.Name</a>
                </h4>
        </div>

       <div id="@item.Id" class="panel-collapse collapse in">
           <div id="file">
           </div>
        </div>

       }

</div>

的javascript

   function collapse(id) {
    var id = id;

                $.ajax({
                    type: "GET",
                    url: "/Document/GetFileList",
                    data:{id:id},
                    success: function (response) {
                        //var panelbar = $find("<%= %>");
                        $("#file").html(response);


                    }
                });
}

Answer 1

你的javascript代码上的这一行在同一个div上添加了所有内容，即使你有多个div，因为你没有区分每个div的id。

$("#file").html(response);

解决方案是使用@item.Id在每个div上添加不同的ID，然后使用该ID在正确的ID上添加正确的内容。

例如在div上添加id

<div id="file_@item.Id">
</div>

然后在javascript上使用id来找到div。

function collapse(id) {
    var id = id;
    $.ajax({
        type: "GET",
        url: "/Document/GetFileList",
        data:{id:id},
        success: function (response) {
            $("#file_" + id).html(response);
        }
    });
}

Answer 2

这是因为你将ajax调用的响应注入到id为file的div中，这将始终将其添加到第一个面板。尝试将一个类添加到从id构造的文件div中，然后注入该元素。类似......

<div class="file_@item.Id"></div>

然后再做

$(".file_" + id).html(response);

成功回调

如何通过javascript动态地将数据显示到引导程序面板？

2 个答案: