動態添加數組內容作爲新元素 - jQuery

編輯：問題解決！我在加載之前修改了頁面，所以腳本實際上沒有做任何事情。我現在修好了它，它工作。感謝您的幫助，我將不得不將這一個粉筆寫成jQuery的新手，這很奇怪。動態添加數組內容作爲新元素 - jQuery

長篇故事我試圖製作一個動態獲取文章標題，縮略圖圖片，描述和鏈接的網頁，並在頁面上創建一個格式良好的列表。我試圖在jQuery和HTML5中實現這一點。

以下是我將用於動態填充頁面的示例數據。現在格式化並不重要，因爲我可以在後期完成後進行格式化。

<script> 
var newsTitles = ["If It Ain&#39;t Broke, Fix It Anyways"]; 
var newsPics = ["images/thumbnail_small.png"]; 
var newsDescs = ["August 14th 2015<br/><b>If It Ain't Broke</b><br/>Author: Gill Yurick<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sometimes, a solution isn't the only one. So how do we justify changes to systems that don't need to be fixed or changed? I explore various systems from other successful card games and how their approaches to issues (be they successes or failures in the eyes of the deisgners) can help us create EC."]; 
var newsLinks = ["it_aint_broke-gill_popson.html"]; 
var newsIndex = 0; 
var newsMax = 1;

我試圖使用上面的數組內容動態地填充元素的代碼段。

<td style="height:500px;width:480px;background-color:#FFF7D7;padding:20px" colspan=2 id="article"> 
    <h1>Articles</h1> 
    <!-- the column for each news peice add an element with the thumbnail, the title and teh desc --> 
    <script> 
     for(i = 0; i < newsMax; i++) { 
      $("#articleList").append("<h3 href=&quot;" newsLinks[i] + "&quot;>" + newsTitles[i] + "</h3>", "<img src=&quot;"newsPics[i] + "&quot;>","<p>" + newsDesc[i] + "</p>",); $("div").append("hello"); 
     } 
    </script> 
    <div id="articleList"> 
     HELLO 
    </div> 
</td>

這裏是它結束了看起來像，如果需要，我可以發佈更多的信息，因爲我知道這可能不是足夠清晰，充分說明我的問題，但我無法確定。先謝謝你。

enter image description here

來源

2016-01-12 Gwen Yurick

控制檯中的任何錯誤？您可以使用'F12'訪問控制檯。 –

在字符串連接中缺少屬性和「+」的引號。無法用'"e;'替換屬性引用 – charlietfl

@ParthTrivedi否，這是無效的使用'"e;' – charlietfl

下面的字符串是無效的HTML和缺少+

"<h3 href=&quot;" newsLinks[i] + "&quot;>"

您需要使用合適的報價爲HTML屬性，並不&quote;

嘗試

"<h3 href='" + newsLinks[i] + "'>"

"<h3 href=\"" + newsLinks[i] + "\">" // `\` used to escape same type quote

個人而言，我更喜歡打開/關閉HTML字符串使用單引號，但無論是將工作，你應該得到的開發工具控制檯拋出一個語法錯誤，這會幫助你找到問題

注謂

來源

2016-01-12 07:31:01 charlietfl

謝謝，我改變了你建議的東西，但它不工作，必須自己做一些調試我沒有意識到開發工具控制檯，這是我第一次嘗試構建一個不是純HTML和CSS的網頁，所以我很不瞭解這些東西。找到一個很好的描述不同的方式來添加報價，給出了爲什麼要使用每個報價的原因。我現在是一個純文本編輯器，因爲它是我所有的，所以記事本+ +無論如何，所以我錯過了拼寫對另一件事的錯誤感覺像是一個傻瓜。 –

試試這個

for(i = 0; i < newsMax; i++) { 
    $("#articleList").append("<h3 href=&quot;"+ newsLinks[i] + "&quot;>" + newsTitles[i] + "</h3>, <img src=&quot;"+newsPics[i] + "&quot;>, <p>" + newsDescs[i] + "</p>"); $("div").append("hello"); 
}

Concatation問題+錯字的newsDescs

來源

2016-01-12 07:32:10

'嘗試這個'並不能解釋發生了什麼變化或爲什麼它應該工作 – charlietfl

這是串聯問題。而newsDesc並未將其定義爲newsDescs。你在變量的末尾忘了''。 –

for(i = 0; i < newsMax; i++) { 
     $("#articleList").append("<h3 href='" + newsLinks[i] + "'>" + newsTitles[i] + "</h3>"); 
     $("#articleList").append("<img src='" + newsPics[i] + "'>","<p>" + newsDesc[i] + "</p>"); 

    }

來源

2016-01-12 11:47:54 Aswathy

動態添加數組內容作爲新元素 - jQuery

回答

相關問題