当按下列表组中的项目时，我想显示有关单击项目的更多详细信息

Question

目前，该页面显示存储在 JSON 字符串中的数组的标题。 我想在按下标题后显示该数组中的其余详细信息。在标题下的另一个列表组中或在新页面上。

这是我目前写的代码：

        <div class="list-group" id="mod">
            <div class="list-group" id="details">
        </div>
    </div>
        
    <script>//filling the first list-group #mod
        $(document).ready(function(){
            $.getJSON('http://localhost:8888/php/json-data-modules.php', function(data) {
                $.each(data.modules, function(index, module) {
                    $('#mod').append('<button type=btn'+module.moduleName+'" class="list-group-item list-group-item-action">'+module.moduleName+'</button>');

                });
            });
        });
//filing the second list-group with new details
        $(document).ready(function(){
            $("this").on("click", function(){  
                $.each(data.modules, function(index, module) {
                    $('#details').append('"class="list-group-item list-group-item-action">'+module.credits+'');
                    $('#details').append('" class="list-group-item list-group-item-action">'+module.location+'');
                });     
            });
        });

这是 JSON 字符串：

{"modules":[{"moduleNo":"999001","moduleName":"Dynamic Web Development","credits":"15","website":"www.dynWeb.ie","dueDate":"2013-05-14","location":"Aungier Street","room":"4037","lat":"53.338545","long":"-6.26607"},{"moduleNo":"999002","moduleName":"Human Computer Interaction","credits":"10","website":"www.hci.ie","dueDate":"2013-04-09","location":"Aungier Street","room":"2005","lat":"53.338545","long":"-6.26607"},{"moduleNo":"999003","moduleName":"Introduction to Programming","credits":"15","website":"www.jscriptIntro.ie","dueDate":"2013-01-11","location":"Kevin Street","room":"1045","lat":"53.337015","long":"-6.267933"},{"moduleNo":"999004","moduleName":"Design Principles","credits":"15","website":"www.designIntro.ie","dueDate":"2013-04-25","location":"Bolton Street","room":"0130","lat":"53.351406","long":"-6.268724"},{"moduleNo":"999005","moduleName":"Design Practice","credits":"10","website":"www.designPract.ie","dueDate":"2013-01-11","location":"Cathal Brugha Street","room":"0123","lat":"53.352044","long":"-6.259514"},{"moduleNo":"999006","moduleName":"Digital Audio","credits":"10","website":"www.dspAudio.com","dueDate":"2013-05-10","location":"Aungier Street","room":"3025","lat":"53.338545","long":"-6.26607"},{"moduleNo":"999007","moduleName":"Digital Signal Processing","credits":"10","website":"www.dspGeneral.ie","dueDate":"2013-04-04","location":"Kevin Street","room":"2103","lat":"53.337015","long":"-6.267933"},{"moduleNo":"999008","moduleName":"History of Digital Media","credits":"5","website":"www.itsbeendone.ie","dueDate":"2013-03-28","location":"Aungier Street","room":"0120","lat":"53.338545","long":"-6.26607"},{"moduleNo":"999009","moduleName":"Digital Asset Management","credits":"5","website":"www.contentStore.ie","dueDate":"2013-05-30","location":"Bolton Street","room":"1004","lat":"53.351406","long":"-6.268724"},{"moduleNo":"999010","moduleName":"Production Skills","credits":"10","website":"www.webDevPro.ie","dueDate":"2013-04-02","location":"Aungier Street","room":"1089","lat":"53.338545","long":"-6.26607"}],"success":1} 

Answer 1

以下是您的代码的一些问题：

1. 在 AJAX 回调之外，变量 data 是未知/未定义的。因此，在您的第二个 DOM 就绪块中，data 是未定义的。您可能想创建一个全局变量，但这不是明智之举。

而是找到一种方法来保留数据，这样您就不必进行不必要的 AJAX 调用。一种方法是使用data 属性；您可以在每个按钮中存储moduleNo 和相应的详细信息：

button.data('mn', module.moduleNo).data('details',module);

1. "this" 完全没有意思，或者至少不是你认为的意思； this，虽然确实有意义，例如在单击事件处理程序中，它引用了被单击的元素。

给按钮一个通用的选择器，例如一个类，例如module，然后用它来统称按钮：

 $('button.module').on('click', function() {
    const moduleNo = $(this).data('mn');
    const details  = $(this).data('details');
    ......
 });

演示

const data = {"modules":[{"moduleNo":"999001","moduleName":"Dynamic Web Development","credits":"15","website":"www.dynWeb.ie","dueDate":"2013-05-14","location":"Aungier Street","room":"4037","lat":"53.338545","long":"-6.26607"},{"moduleNo":"999002","moduleName":"Human Computer Interaction","credits":"10","website":"www.hci.ie","dueDate":"2013-04-09","location":"Aungier Street","room":"2005","lat":"53.338545","long":"-6.26607"},{"moduleNo":"999003","moduleName":"Introduction to Programming","credits":"15","website":"www.jscriptIntro.ie","dueDate":"2013-01-11","location":"Kevin Street","room":"1045","lat":"53.337015","long":"-6.267933"},{"moduleNo":"999004","moduleName":"Design Principles","credits":"15","website":"www.designIntro.ie","dueDate":"2013-04-25","location":"Bolton Street","room":"0130","lat":"53.351406","long":"-6.268724"},{"moduleNo":"999005","moduleName":"Design Practice","credits":"10","website":"www.designPract.ie","dueDate":"2013-01-11","location":"Cathal Brugha Street","room":"0123","lat":"53.352044","long":"-6.259514"},{"moduleNo":"999006","moduleName":"Digital Audio","credits":"10","website":"www.dspAudio.com","dueDate":"2013-05-10","location":"Aungier Street","room":"3025","lat":"53.338545","long":"-6.26607"},{"moduleNo":"999007","moduleName":"Digital Signal Processing","credits":"10","website":"www.dspGeneral.ie","dueDate":"2013-04-04","location":"Kevin Street","room":"2103","lat":"53.337015","long":"-6.267933"},{"moduleNo":"999008","moduleName":"History of Digital Media","credits":"5","website":"www.itsbeendone.ie","dueDate":"2013-03-28","location":"Aungier Street","room":"0120","lat":"53.338545","long":"-6.26607"},{"moduleNo":"999009","moduleName":"Digital Asset Management","credits":"5","website":"www.contentStore.ie","dueDate":"2013-05-30","location":"Bolton Street","room":"1004","lat":"53.351406","long":"-6.268724"},{"moduleNo":"999010","moduleName":"Production Skills","credits":"10","website":"www.webDevPro.ie","dueDate":"2013-04-02","location":"Aungier Street","room":"1089","lat":"53.338545","long":"-6.26607"}],"success":1};
    //filling the first list-grid #mod
    $(document).ready(function(){
        $.each(data.modules.reverse(), function(index, module) {
            const button = $('<button type=btn'+module.moduleName+'" class="list-group-item list-group-item-action module">'+module.moduleName+'</button>');
            button.data('mn', module.moduleNo) //if needed
            .data('details', module);
            $('#mod').prepend(button);

        });
        //filing the second list-grid with new details
        $("button").on("click", function(){
            const moduleNo = $(this).data('mn');
            const module = $(this).data('details');
            $('#details').html(JSON.stringify(module));
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="list-group" id="mod">
        <div class="list-group" id="details">
    </div>
</div>