Question

以下代码只是我原始代码的一部分。

我有几个像这样的常数。

每个变量将显示为一个元素。

我需要的是用最简单的代码显示存储在所有变量Imagem中的每个图像。

const jogos2018 = {
  LSB_2018_JOGO_1: {
    Data: "11/03/2018",
    Hora: "15:00",
    Imagem: "<img src='Imagens/oponentes/basquetebol/lsb/bmc.png' />",
    Oponente: "BMC",
    Placar: "V, 52-42",
    Torneio: "LSB",
    Temporada: "Regular",
    Local: "Ginásio Miécimo da Silva",
    Mais: "Mais+"
  }
};

Answer 1

var items = Object.values(jogos2018)
var parentElement = document.body // You may change this to any other element

for (let item of items)
{
    parentElement.innerHTML += item.Imagem
}

此代码仅用于演示，表示：

此代码效率不高
需要进一步调整以满足您的需求

请参考MDN并检查文档createElement的方法以正确地进行操作（纯JS，否jQuery）

Answer 2

代码可能会更干净/性能更好，但应该可以帮助您

我假设您的jogos2018是一个对象，其中包含由后缀为LSB_2018_JOGO_x或类似名称的增量属性表示的对象数组。

似乎他们已经在为您做标记，因此您所需要做的就是收集这些内容并输出html。

const jogos2018 = {
  LSB_2018_JOGO_1: {
    Data: "11/03/2018",
    Hora: "15:00",
    Imagem: "<img src='https://images.unsplash.com/photo-1549223123-e05d6e08643d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60' />",
    Oponente: "BMC",
    Placar: "V, 52-42",
    Torneio: "LSB",
    Temporada: "Regular",
    Local: "Ginásio Miécimo da Silva",
    Mais: "Mais+"
  },
  LSB_2018_JOGO_2: {
    Data: "11/03/2018",
    Hora: "15:00",
    Imagem: "<img src='https://images.unsplash.com/photo-1549018404-766c8a1fe5c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60' />",
    Oponente: "BMC",
    Placar: "V, 52-42",
    Torneio: "LSB",
    Temporada: "Regular",
    Local: "Ginásio Miécimo da Silva",
    Mais: "Mais+"
  }
}

const fillme = document.querySelector('#fillme')


const filler = arr => {
  let images = ''

  for (let prop in arr) {
    images += arr[prop].Imagem
  }

  return images
}



fillme.innerHTML = filler(jogos2018)

<div id="fillme"></div>

Answer 3

您可以使用JSON.stringify()将JavaScript普通对象转换为JSON字符串，然后使用.match()属性名称和值，.split()属性名称

const jogos2018 = {"LSB_2018_JOGO_1":{"Data":"11/03/2018","Hora":"15:00","Imagem":"<img src='Imagens/oponentes/basquetebol/lsb/bmc.png' />","Oponente":"BMC","Placar":"V, 52-42","Torneio":"LSB","Temporada":"Regular","Local":"Ginásio Miécimo da Silva","Mais":"Mais+"}};

const getProp = (o, prop) => 
  JSON.stringify(o)
  .match(new RegExp(`"${prop}":"[^"]+(?=")`)).pop()
  .split(/^.*:"/).pop();

console.log(getProp(jogos2018, "Imagem"));

显示存储在常量内部变量中的图像

3 个答案: