Question

HTML

<template>
<p>Hello</p>

<p>{{message}}</p>

</template>

<script>
module.exports = {
    data: {
        message: 'hello'
    }
}
</script>

<style>
p {
    font-size: 14px
}
</style>

的JavaScript

<head>
    <title>Testing game</title>
    <link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="script.js"></script>
</head>
<body>     
    <div class="page">

<div class="upper"></div>

<div class="middle"></div>

<div class="lower"></div>
    </div>
</body>

我如何为＆＃34; M4A1-S Golden Coil＆＃34;设置图像？并显示图像 div class =＆＃34; upper＆＃34;

Answer 1

这样的东西？

https://jsfiddle.net/6ekw0a71/

HTML：

<div class="page">
  <div class="upper"></div>

  <div class="middle"></div>

  <div class="lower"></div>
</div>

JS：

var weapon = [
  {
    caption: "M4A1-S Golden Coil",
    src: "https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpou-6kejhz2v_Nfz5H_uOxh7-Gw_alIITCmGpa7cd4nuz-8oP5jGu5rhc1JjSceNfXJVMgaVmB_QO-wLi5h5HovZ_Kn3A27HR24HrcnRC3g0lJbOFthPKcHwjIUrsJQvfN77TKZw/360fx360f"
  },
  "USP-S Kill Confirmed",
  "Shadow Daggers"
];

var price =  ["39.16", "23.38", "135.92"];

var upper = document.querySelector('.upper')

var img = document.createElement('img');
img.setAttribute('src', weapon[0].src);

var img = upper.appendChild(img);

Answer 2

这会在.upper上加载武器，价格和图像：

步骤：

为图片网址添加另一个数组。
等待页面加载`window.onload``
更改鞋帮的innerHTML并使用数组上的值。

/* Your code. */
var weapon = [
  "M4A1-S Golden Coil",
  "USP-S Kill Confirmed",
  "Shadow Daggers"
];

var price = ["39.16",  "23.38","135.92"];

/* New code */

// Define
var image = ["http://vignette3.wikia.nocookie.net/cswikia/images/d/d8/Csgo-m4a1s-golden-coil-workshop.jpg/revision/latest?cb=20150918211415", "http://vignette3.wikia.nocookie.net/cswikia/images/9/96/Csgo-usps-kill-confirmed-announcement.jpg/revision/latest?cb=20150918131537", "http://thingiverse-production-new.s3.amazonaws.com/renders/fb/39/21/a6/35/Immagine2_preview_featured.jpg"];


window.onload = function() {
  document.querySelector('.upper').innerHTML = '<strong> ' + weapon[0] + '</strong><br /><img src="' + image[0] + '" /><br />' + price[0];
}

img { border: 0; }

<div class="page">
  <div class="upper"></div> 
  <div class="middle"></div>
  <div class="lower"></div>
</div>

使用它来达到理想的效果。但是，我觉得缺少一些背景。

PS：我认为对象或类在这里会更好用。例如：

var weapons = [
  {
    weapon: 'M4A1-S Golden Coil',
    price: 39.16,
    image: 'http://vignette3.wikia.nocookie.net/cswikia/images/d/d8/Csgo-m4a1s-golden-coil-workshop.jpg/revision/latest?cb=20150918211415'
  },
  {
    weapon: 'USP-S Kill Confirmed',
    price: 23.38,
    image: 'http://vignette3.wikia.nocookie.net/cswikia/images/9/96/Csgo-usps-kill-confirmed-announcement.jpg/revision/latest?cb=20150918131537'
  }
];

我怎么能为阵列设置图像？

2 个答案: