如何使用切换按钮从JSON文件中提取特定信息？

Question

我正在为我的网站创建一个通讯录，并且添加了一个JSON文件。 到目前为止，我已经将所有信息拉入网站，但是我不希望所有这些信息都可见，直到我单击每个人的切换按钮。

JSON代码：

[ { "picture": "img/Profile/1.jpeg", "name": "Peter Banks", "age": 29, "gender": "Male", "email": "petebanks@hotmail.com", "phone": "+44 (963) 542-3770", "address": "708 Wyckoff Avenue, Sandston, Massachusetts, 7957" }, { "picture": "img/Profile/2.jpeg", "name": "Kent Beard", "age": 25, "gender": "Male", "email": "kentbeard@gmail.com", "phone": "+44 (826) 537-2956", "address": "115 Harkness Avenue, Corinne, Nebraska, 3131" }, { "picture": "img/Profile/14.jpeg", "name": "Judy Brooks", "age": 31, "gender": "Female", "email": "judybrooks@hotmail.co.uk", "phone": "+44 (807) 513-2489", "address": "204 Albemarle Terrace, Elizaville, New Hampshire, 724" } }

Javascript文件

$( document ).ready(function() {

$.getJSON('generated_contacts.json', function(data) {
       var output="<div>";
        $.each(data, function(i, item) {
            output+="<img src='" + data[i].picture + "'/></p><p>" +
        data[i].name + "</p><p>" +
        data[i].gender + ", " +
        data[i].age + "</p><p>" +
        data[i].email + "</p><p>" +
        data[i].phone + "</p><p>" +
        data[i].address + "</p><p>" ;
        });

        output+="</div>";
        $("#placeholder").html(output);
});

}）;

我将为18个人提供18个切换按钮，但是我的问题是我不确定如何使每个单独的按钮提取个人数据？

Answer 1

一种方法是为每个用户对象（名称？）具有唯一的ID，并将其映射到按钮ID或按钮中的数据属性。 在onClick事件处理程序中，您可以使用此ID提取数据。