如何停止重復 <p> 標簽？我正在嘗試從JSON文件加載數據並使用.html（）函數顯示在網站中

Question

原始文件包含一些硬編碼的數據，我想用我的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();
    });

});

Answer 1

這是一個更新的代碼片段，它從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>

如何停止重復 <p> 標簽？我正在嘗試從JSON文件加載數據並使用.html（）函數顯示在網站中

問題描述

1 個解決方案

解決方案1
1 2018-01-10 05:03:55

如何停止重復 <p> 標簽？ 我正在嘗試從JSON文件加載數據並使用.html（）函數顯示在網站中

問題描述

1 個解決方案

解決方案1 1 2018-01-10 05:03:55

如何停止重復 <p> 標簽？我正在嘗試從JSON文件加載數據並使用.html（）函數顯示在網站中

解決方案1
1 2018-01-10 05:03:55