显示存储在一个变量中的常量的图像

问题描述 投票:0回答:3

下面的代码仅仅是我的原代码的一部分。

我有几个常数,赞一个。

每个变量将被显示为一个元件。

我需要的是显示以尽可能简单的代码存储在所有变量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+"
  }
};
javascript html image constants
3个回答
0
投票
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


0
投票

代码可以更清洁/执行,但应该让你去。

我想你的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>

0
投票

您可以使用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"));
© www.soinside.com 2019 - 2024. All rights reserved.