javascript - 从外部 .js 文件中读取以告诉 javascript 要显示哪个图像

Question

我有一些图像，位于一个名为“img”的文件夹中。我有一个列表，以 .js 格式编写；我在这里附上它的简化版本。

mylist = [
 {
  "color": "red",
  "item": "R1-1",
  "image": "R1-1.png"
 },
 {
  "color": "red",
  "item": "R1-2",
  "image": "R1-2.png"
 },
 {
  "color": "red",
  "item": "R1-3",
  "image": "R1-3.png"
  },
  {
   "color": "red",
   "item": "R1-4",
   "image": "R1-4.png"
},
]

我希望我的 javascript 读取 .js 文件，并知道要显示哪个图像。

var test_stimuli = [
    {stimulus: "<div><img src='img/'+mylist[0]["image"]></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/'+mylist[1]["image"]></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/'+mylist[2]["image"]></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/'+mylist[3]["image"]></img></div><div><img src='img/scale.png'></img></div>"},
];

但这不起作用。我的猜测是我写错了javascript，可能是引号弄乱了，因为以下工作：

var test_stimuli = [
    {stimulus: "<div><img src='img/R1-1.png'></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/R1-2.png'></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/R1-3.png'></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/R1-4.png'></img></div><div><img src='img/scale.png'></img></div>"},
    {stimulus: "<div><img src='img/R1-5.png'></img></div><div><img src='img/scale.png'></img></div>"},
];

我希望显示器看起来像这样： 在此处输入图像描述

标签： javascript

Answer 1

问题在于您的字符串连接，这里：

{stimulus: "<div><img src='img/'+mylist[0]["image"]></img></div><div><img src='img/scale.png'></img></div>"},

JavaScript 中的新字符串可以用双引号、单引号或反引号构建：

例如：

var name = "Bob"

var string1 = "Hello, " + name
console.log(string1)

var string2 = 'Hello, ' + name
console.log(string2)

var string3 = `Hello, ${name}`
console.log(string3)

这三个字符串都将返回相同的句子。

这应该有效：

var mylist = [
 {
  "color": "red",
  "item": "R1-1",
  "image": "R1-1.png"
 }
 ]
 
 console.log('mylist[0].image: ', mylist[0].image)
 
 var test_stimuli_1 = [
    {stimulus: "<div><img src='img/R1-1.png'></img></div><div><img src='img/scale.png'></img></div>"}
]

console.log('test_stimuli_1[0] is: ', test_stimuli_1[0])


var test_stimuli_2 = [{stimulus: "<div><img src='img/'" + mylist[0].image + "'></img></div><div><img src='img/scale.png'></img></div>"}]

console.log('test_stimuli_2[0] is: ', test_stimuli_2[0])

请注意，您还可以使用模板文字：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

模板文字语法：string text ${expression} string text

所以这：

var test_stimuli_2 = [{stimulus: "<div><img src='img/'" + mylist[0].image + "'></img></div><div><img src='img/scale.png'></img></div>"}]

可以改写成这样：

var test_stimuli_2 = [{stimulus: `<div><img src='img/${mylist[0].image}'></img></div><div><img src='img/scale.png'></img></div>`}]