2
respostas

Troca de imagens na mesma pagina(reutilizar o código).

Olá a todos!

Estou no momento fazendo o challenge da alura o "alura geek", a parte html e css esta praticamente pronta, mas quero adicionar um extra, quero que na pagina de produtos o usuário possa escolher o produto que ele vai ver as informações, mas sem sair da página. O código java script ja está pronto, preciso apenas fazer com que ele seja executado outras vezes quando for clicado em botões diferentes, pois no momento ele funciona apenas uma vez, e gostaria de aproveitar o código sem ficar repetindo e usando um id diferente para cada botão. Eu penso que devo utilizar target, mas não sei como executar isto.!!segue código e print na página Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

Não sei como os dados dos produtos deste desafio foram disponibilizados, mas, eu faria da seguinte forma:

  1. construiria um array de objetos, com os dados de cada produto;
  2. com o forEach percorreria o array e montaria na tela os cards de cada produto junto com o botão "ver produto" que acionaria uma função, por exemplo "mostrarDadosDoProduto(index)" passando o index do forEach como parâmetro.
  3. ao ser clicado no botão de cada produto, pegaria a posição dentro do array e montaria um card somente com os dados do produto clicado.

Então ,este desafio é apenas em html e css a parte do javaScript é um extra que estou fazendo por conta propria,mas vou tentar fazer da maneira que disse,muito obrigado!