我正在尝试将 append 图像从 javascript object 数组放到我的 html 页面上

Question

So I was able to create a movie class array with 4 constructors, and a for loop with 3 iterations that represent three different movies.所以我能够创建一个电影 class 数组，其中包含 4 个构造函数，以及一个包含 3 次迭代的 for 循环，代表三部不同的电影。 On the html page this allows the user to open a dropdown selection and pick one of the three movies.在 html 页面上，这允许用户打开下拉选择并从三部电影中选择一部。 After hitting the submit button I want to display all the info for all the movie they selected including its image which is the difficult part.点击提交按钮后，我想显示他们选择的所有电影的所有信息，包括其图像，这是困难的部分。 Here is my code so far:到目前为止，这是我的代码：

<!DOCTYPE html>
 <html>
 <head>
 <script src="jquery.js"></script>
 <script src="Script.js"></script>
</head>
<body>
<form > 
<select> 
</select>
<button onclick="showDetail()">Submit</button>
</form>
<p></p>
</body>

 </html>


 class movie {
name;
price;
image;
genre;
constructor(x,y,z,a){
this.name = x;
this.price = y;
this.image = z;
this.genre = a;
   }
  }


 let movies =[];
movies[0]=  new movie("Deadpool", "$6.95","Image/Deadpool.jpg", "Superhero, Action");
movies[1]=  new movie("Titanic", "$4.95", "" , "Romance, Drama");
movies[2]=  new movie("Spiderman 3", "$6.95","", "Superhero, Action");



$(document).ready(function() { console.log( "ready!");
for (var i = 0; i < 3; i++){
movies[0].image= "Image/Deadpool.jpg";
movies[1].image= "Image/Titanic.jpg"; 
movies[2].image= "Image/Spiderman.jpg";
$("select").append(`<option>${movies[i].name}</option>`); console.log(i) }});

 function showDetail(){
 for (var i = 0; i < 3; i++){
    $("p").append(`${movies[i].price},${movies[i].genre}, ${movies[i].image}`);

   }
  }

Answer 1

You can append HTML using.append() but I would not recommend appending it to a paragraph tag, and using the paragraph selector, try doing this:你可以 append HTML using.append() 但我不建议将它附加到段落标记，并使用段落选择器，尝试这样做：

<div id="details"> </div>

Add the above instead of the paragraph tag and then in jquery you could so something like:添加上面的内容而不是段落标签，然后在 jquery 中你可以这样：

$('#details').append(`<h1> ${movies[i].price} </h1> <p> ${movies[i].genre} </p> <img src="${movies[i].image}" alt="movie" />

我正在尝试将 append 图像从 javascript object 数组放到我的 html 页面上

问题描述

1 个解决方案

解决方案1
0 2020-10-09 21:48:58

我正在尝试将 append 图像从 javascript object 数组放到我的 html 页面上

问题描述

1 个解决方案

解决方案1 0 2020-10-09 21:48:58

解决方案1
0 2020-10-09 21:48:58