圖像不呈現 - JavaScript，Ajax

我想使用HTML，Javascript和AJAX在列表中呈現圖像。圖像不呈現 - JavaScript，Ajax

以下是我的HTML代碼

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>cat Clicker</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="cc.js"></script> 
</head> 
<body> 
<div class="container"> 
<div class="row-fluid"> 
    <div class="col-sm-3"> 
     <ul id="elems" class = "elems"></ul> 
    </div> 
    <div class="col-sm-9"> 
    Hi 
    </div> 

</body> 
</html>

在我的JavaScript代碼，我有3個瓦爾命名廠景，模型和章魚如下

$(function(){ 
    var model = { 
     init: function() { 
      imageArray = []; 
      imageArray[0] = { 
       id: 0, 
       image01 : new Image(), 
       src : "c0.jpg", 
       imageCaption : "cat0", 
       count: 0 
      }; 
      imageArray[1] = { 
       id: 1, 
       image01 : new Image(), 
       src : "c1.jpg", 
       imageCaption : "cat1", 
       count: 0 
      }; 
      imageArray[2] = { 
       id: 2, 
       image01 : new Image(), 
       src : "c2.jpeg", 
       imageCaption : "cat2", 
       count: 0 
      }; 
      imageArray[3] = { 
       id: 3, 
       image01 : new Image(), 
       src : "c3.jpeg", 
       imageCaption : "cat3", 
       count: 0 
      }; 
      imageArray[4] = { 
       id: 4, 
       image01 : new Image(), 
       src : "c4.jpg", 
       imageCaption : "cat4", 
       count: 0 
    }; 
     }, 
     returnImages: function() { 
      return imageArray.src 
     } 
    }; 


    var octopus = { 
     openAll: function() { 
      return model.returnImages(); 
     }, 
     init: function() { 
      model.init(); 
      view1.init(); 
     } 
    }; 
    var view1 = { 
     init: function() { 
      this.catList = $('#elems'); 
      view1.render(); 
     }, 
     render: function(){ 
      var htmlStr = ''; 
      octopus.openAll().forEach(function(image){ 
       htmlStr += "<li><img class="imge" src='" + image + "' width=\"160\" height=\"120\"/></li></hr><br/>"; 
      }); 
      this.catList.html(htmlStr); 
     } 
    }; 


    octopus.init(); 
});

在我建立我的所有數據模型VAR和一個返回所有圖像的函數。在view1 var中，我設置了渲染函數來顯示圖像列表，並在var octopus中嘗試連接模型和視圖。但是，圖像沒有在我的頁面中呈現。請幫助我瞭解我在這裏出錯的地方。

由於提前

來源

2017-09-11 Arjun Viswanathan

你要去哪裏錯了是imgArray是Array和犯規有一個屬性src

returnImages: function() { 
    return imageArray.src 
}

每個元素數組中有一個屬性src所以我懷疑您試圖獲得所有src屬性的數組。將其更改爲

returnImages: function() { 
    return imageArray.map(function(e){ 
     return e.src; 
    }); 
}

然而，這並不是故事的全部 - 你model.init方法創建數組，但從來沒有做任何事情與它 - 作爲方法結束它就會盡快扔掉。你可能想在一些地方保存到模型：

var model = { 
     init: function() { 
      imageArray = []; 
      //.. snip .. // 
      model.imageArray= imageArray; 
     } 
}

然後你就需要更新returnImages

returnImages: function() { 
    return model.imageArray.map(function(e){ 
     return e.src; 
    }); 
}

來源

2017-09-11 08:38:59 Jamiec

你應該返回數組..

returnImages: function() { 
    return imageArray 
}

，然後綁定到每個圖像的src屬性

render: function(){ 
     var htmlStr = ''; 
     octopus.openAll().forEach(function(image){ 
      htmlStr += "<li><img class='imge' src='" + image.src + "' width=\"160\" height=\"120\"/></li></hr><br/>"; 
     }); 
     this.catList.html(htmlStr); 
    }

Here to see it working in jsfiddle

來源

2017-09-11 08:41:58 CodeHacker

感謝您的建議。我最初嘗試返回數組，然後綁定src，同時顯示每個圖像。但是這對我沒有用。然而，我試圖更新returnImages如下 returnImages：function（）{ return model.imageArray.map（function（e）{ return e.src; }）; } 這對我有效。 –

Jamiec還檢測到你不在模型中存儲數組的問題...所以他的答案應該nepl你出來。和你可以映射，因爲他sugests或返回model.imageArray – CodeHacker

剛剛意識到這兩個建議適合我！謝謝！ –

圖像不呈現 - JavaScript，Ajax

回答

相關問題