顯示來自Javascript數組的圖像

Question

我正在創建一個JS代碼段，以在網頁上顯示疊加層，並且需要抓取圖像，將其保存到變量中，然后將它們顯示在疊加層上。

我目前在陣列中需要的圖像：

var itemImages = $(".itemImg img");
var imageArray = [];
for (i = 0; i < itemImages.length; i++) {
  imageArray.push("<li><img src='" + itemImages[i].src + "'/></li>");
}

圖像數組如下所示：

["<li><img src='http://cdnmedia.marmot.com/images/product/tile/75940_9149_f.jpg'/></li>", "<li><img src='http://cdnmedia.marmot.com/images/product/tile/18840_001_f.jpg'/></li>"]

我似乎可以弄清楚如何在我的代碼中顯示這些內容。 該函數當前如下所示：

function displayModal(itemCount, imageArray, cartTotal) {
  $("<article id='modal'><div id='itemCount'>" + "Total Items: " 
    + itemCount + "<br><div id=itemImages>" + "<div id='images'>" + "IMAGES!" +
    "</div></div></div></article>").css({
    "width": "461px",
    "height": "263px",
    "line-height": "200px",
    "position": "fixed",
    "top": "50%",
    "left": "50%",
    "margin-top": "-155px",
    "margin-left": "-232px",
    "background-color": "rgb(255,255,255)",
    "border-radius": "5px",
    "text-align": "center",
    "z-index": 101,
    "border": "1px solid rgb(227,227,227)",
    "border-top": "4px solid rgb(217,0,31)"
  }).appendTo("#overlay");
  $("#itemCount").css({
    "position": "relative",
    "bottom": "79px",
    "font-family": "Helvetica",
    "color": "#000",
    "font-size": "16px"
  }).appendTo("#modal");
}

我正在使用占位的圖像！ 用於實際圖像。 我似乎無法顯示圖像本身，僅顯示“對象”一詞。

Answer 1

我懷疑這是因為您正在引用imageArray數組-這是一個對象-但您想要的是數組中的元素。

您可以以與首次添加它們類似的方式檢索數組中的單個項目，例如

    for (i = 0; i < imageArray.length; i++) {
      var image = imageArray[i];
    } 

或者，您可以通過將以下內容添加到displayModal函數的開頭來構建所有圖像HTML的字符串：

    var imageHTML = "";
    for (i = 0; i < imageArray.length; i++) {
      imageHTML += imageArray[i];
    } 

並將imageHTML代替"IMAGES!"添加到生成的HTML中"IMAGES!"

我在JSFiddle中添加了一個工作示例