Php 如何在<；p>；标签？我正在尝试从JSON文件加载数据，并使用.html（）函数显示在网站中

原始文件中有一些硬编码的数据，我想用JSON文件中的数据替换这些数据，我用这些代码尝试了一下，取得了一些进展，但每次单击另一个电子邮件头时，相同的数据都会放在html文件（索引）的标记中。我需要找到一种阻止数据复制的方法。谁能帮帮我？！我是AJAX/JSON新手

$(document).ready(function() {

        $.getJSON("email_list.js", 
            {format: "json"}).done(function(data){

            console.log(data);
            for (key in data) {
                emailID = "#" + data[key].id;

                $(".email-header")
                .eq(key).attr("id", data[key].id);

                $(emailID).find('td')
                .eq(0).attr("id", "sender" + data[key].id)
                .html(data[key].sender);

                $(emailID).find('td')
                .eq(1).attr("id", "subject" + data[key].subject)
                .html(data[key].subject);

                $(emailID).find('td')
                .eq(2).attr("id", "datetime" + data[key].datetime)
                .html(data[key].datetime);
            }
        });

    // show/hide emails when click on headers
    $("tr.email-header").click(function(){
        id = "#body " + $(this).attr("id");
        //creates the name for each file
        fileID = $(this).attr("id") + ".js";
            //console.log(id);
            $.ajax({
                url: fileID, 
                dataType: "JSON",
                success: function(data) {
                    console.log(data);
                    //I need to replace the contents in the HTML file with 
                    //my JASON file contents.
                    fElement = $("tr.email-body").find("p");

                        fElement.eq(0).html(data.recipient);
                        fElement.eq(1).html(data.body);                 
                        fElement.eq(2).html(data.recipient);
                        fElement.eq(3).html(data.body);
                        fElement.eq(4).html(data.recipient);
                        fElement.eq(5).html(data.body);
                }}).fail(function() {
                        console.log(id + " - HAS AN ERROR!");               
                });
        $(this).next().eq(0).toggle();  

    });

    // hide email on click
    $("tr.email-body").click(function(){
        $(this).hide();
    });

});

---

下面是一个更新的代码片段，它正在从github repo中提取ajax数据。只需跟踪查看我们是如何访问js文件中的元素的

一些补充说明：

• 尝试将类用于重复的元素，如发件人主题和日期时间，而不是ID。这样，访问它们就更容易了。我没有改变

• 您已将其设置为在每次单击邮件标题时重新加载邮件。可能需要确保只加载一次

• 您应该立即清除现有的html，以便在加载真正的内容之前，占位符文本不会在一瞬间显示出来

$（文档）.ready（函数（）{
$.getJSON（“https://raw.githubusercontent.com/checonunez74/AJAX-JSONproject/master/email_list.js", {
格式：“JSON”
}).完成（功能（数据）{
用于（输入数据）{
emailID=“#”+数据[key].id；
$（“.email头”）
.eq（key）.attr（“id”，数据[key].id）；
f_el=$（emailID）.find（'td'）；
f_el.eq（0）.attr（“id”，“发送方”）
.html（数据[key].sender）；
公式（1）属性（“id”，“主体”）
.html（数据[key].subject）；
公式（2）属性（“id”、“日期时间”）
.html（数据[key].datetime）；
}
});
//单击标题时显示/隐藏电子邮件
$（“tr.email-header”）。单击（函数（）{
设id=$（this.attr（“id”），
emailBody=$（this）.next（“.email body”），
emailRecipient=emailBody.find（'p'）.first（），
emailContent=emailBody.find（'p'）.last（）；
//在这里进行AJAX调用
$.ajax({
网址：'https://raw.githubusercontent.com/checonunez74/AJAX-JSONproject/master/“+id+”.js”，
数据类型：“JSON”，
成功：功能（数据）{
emailRecipient.text（'To:'+data.recipient）；
emailContent.text（data.body）；
}
}).fail（函数（）{
日志（id+“-有错误！”）；
});
emailBody.toggle（）；
});
//单击时隐藏电子邮件
$（“tr.email-body”）。单击（函数（）{
$（this.hide（）；
});
});
。电子邮件正文{
显示：无；
}

电子邮件收件箱
发件人
主题
收到
上下快速移动
Re：你的大脑
2014年3月1日晚上9:56
致：Tom@tom.tom

嘿，汤姆，我是鲍勃，从大厅下面的办公室

你唯一的朋友
我一直都非常好
2011年7月4日下午12:34
致：want@you.gone

这就是我所指望的

花式裤子先生
机会是。。。
2005年10月21日上午4:16
致：dancing@the.parade

你以为你有一条漂亮的裤子，现在你知道这是真的了

我明白你的意思，我想这就是我的问题所在，我正试图想出一种不同的方法来解决这个问题；到目前为止，我的研究表明，也许附加是最好的，或者可能是事件委托。但我仍然无法整合我需要的代码。有什么好主意吗？你能把JSON添加到你的问题中，并模拟它正常工作时的样子和行为吗？当然没问题，我调用了三个不同的JSON文件，它们的id命名为（100495.js）。下面是其中一个文件的内容：{“id”：100496，“datetime”：“01/01/2018”，“sender”：“Clau J.Nunez”，“收件人”：“Sofia”，“主题”：“这是第二个EML”，“正文”：“这是对JASON文件中secod电子邮件的测试。”}预期的结果应该是这样的：发送者主体收到了Clau J.Nunez这是第二个emil这是对JASON文件中第二封电子邮件的测试如果我看到了你的html，这会更容易，但你已经知道你使用了哪个元素$(“tr.email-header”）。单击（function（）{，您已经在代码中的某一点上使用$（this）访问了它。您需要使用该信息替换fElement=$（“tr.email-body”）.find（“p”）；使用基于$（this）的更精确的内容。我认为它将是fElement=$（this）。下一步（“tr.email-body”）.find（“p”）；然后您将只有两个段落来更新等式（0）和等式（1）。-如果您添加HTML，我们可以更轻松地排除故障。：）