繁体   English   中英

如何停止重复 <p> 标签? 我正在尝试从JSON文件加载数据并使用.html()函数显示在网站中

[英]How do I stop duplication in <p> tag? I am trying to load data from my JSON file and display in the website with .html() function

这是问题的屏幕截图

原始文件包含一些硬编码的数据,我想用我的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存储库中提取ajax数据。 只需跟踪以了解我们如何访问js文件中的元素。

一些附加说明:

  • 尝试将类用于重复元素,例如发件人主题和日期时间,而不要使用ID。 然后,访问它们甚至更加容易。 我没有改变。

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

  • 您应该立即清除现有的html,以便在加载实际内容之前不显示占位符文本。

 $(document).ready(function() { $.getJSON("https://raw.githubusercontent.com/checonunez74/AJAX-JSONproject/master/email_list.js", { format: "JSON" }).done(function(data) { for (key in data) { emailID = "#" + data[key].id; $(".email-header") .eq(key).attr("id", data[key].id); f_el = $(emailID).find('td'); f_el.eq(0).attr("id", "sender") .html(data[key].sender); f_el.eq(1).attr("id", "subject") .html(data[key].subject); f_el.eq(2).attr("id", "datetime") .html(data[key].datetime); } }); // show/hide emails when click on headers $("tr.email-header").click(function() { let id = $(this).attr("id"), emailBody = $(this).next(".email-body"), emailRecipient = emailBody.find('p').first(), emailContent = emailBody.find('p').last(); //make the AJAX call here $.ajax({ url: 'https://raw.githubusercontent.com/checonunez74/AJAX-JSONproject/master/' + id + '.js', dataType: "JSON", success: function(data) { emailRecipient.text('To: ' + data.recipient); emailContent.text(data.body); } }).fail(function() { console.log(id + " - HAS AN ERROR!"); }); emailBody.toggle(); }); // hide email on click $("tr.email-body").click(function() { $(this).hide(); }); }); 
 .email-body { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="email.js"></script> <link rel="stylesheet" href="email.css"> </head> <body> <h1>Email Inbox</h1> <table class="table table-hover" id="inbox"> <thead> <tr class="active"> <th>Sender</th> <th>Subject</th> <th>Received</th> </tr> </thead> <tbody> <tr class="warning email-header"> <td>Bob</td> <td>Re: Your brains</td> <td>01/03/2014 9:56pm</td> </tr> <tr class="email-body"> <td colspan="3"> <p>To: Tom@tom.tom</p> <p>Heya Tom, it's Bob, from the office down the hall...</p> </td> </tr> <tr class="warning email-header"> <td>Your only friend</td> <td>I've been shockingly nice</td> <td>04/07/2011 12:34pm</td> </tr> <tr class="email-body"> <td colspan="3"> <p>To: want@you.gone</p> <p>That's what I'm counting on.</p> </td> </tr> <tr class="warning email-header"> <td>Mr. Fancy Pants</td> <td>Chances are...</td> <td>10/21/2005 4:16am</td> </tr> <tr class="email-body"> <td colspan="3"> <p>To: dancing@the.parade</p> <p>You thought you had some fancy pants and now you know it's true.</p> </td> </tr> </tbody> </table> </body> </html> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM