-1

preciso exibir uma imagem baseada no conteúdo de uma div. A tag já existe e preciso descartar a que foi carregada e substituir pela nova tag com a imagem em questão.

Vou dar um exemplo, o site carrega o nome do artiste e a capa do álbum, que é gerada dinamicamente de um site externo, como por exemplo:

<div class="ccartist">A Flock of Seagulls</div>
<div class="cover"><img src="blabla.bla/12345.jpg"></div>

Queria excluir essa tag img carregada pela página por outra, seguindo os parâmetros:

<div class="cover"><img src="patch/to/covers/{conteúdo da div ccartist}.jpg"></div>

Resultando em:

<div class="cover"><img src="patch/to/covers/A Flock of Seagulls.jpg"></div>

Como eu faria isso usando javascript/jquery?

Obrigado!

1 Resposta 1

0

A melhor forma de você fazer isso seria com Javascript.

Segue exemplo:

 <div class="ccartist">A Flock of Seagulls</div>
 <div class="cover"><img src=""></div>

<script>

//iniciando variáveis com o conteúdo de cada classe
var ccartist = document.getElementsByClassName('ccartist');
var cover = document.getElementsByClassName('cover');

//aqui você seta o conteúdo de ccartlist no atributo "src" do cover
cover.setAttribute('src', 'patch/to/covers/' + produtosIntTitulo[0].innerText + '.jpg');

</script> 

você pode também usar Jquery, que ficaria assim

<script>
 $(document).ready(function(){
   $('.cover').attr('src','patch/to/covers/' + $('.ccartist').text() + '.jpg');
 });
</script>
4
  • Olá amigo, editei a pergunta, esqueci de alguns detalhes, como por exemplo o conteúdo é gerado por um JS externo, então queria remover a tag carregada por outra, com os parâmetros que sugeri. Agradeço a sua ajuda. Commented 8/05/2020 às 18:10
  • salve rodrigo. Em que momento você quer substituir o conteúdo? Não ficou bem claro, pq com esse código ele sempre sobrescreverá o conteúdo da tag img, mas se for em um momento específico, me esclareça para que eu possa editar a resposta Commented 8/05/2020 às 18:14
  • Testei no jsfiddle e foi ok, testei no WordPress aqui e fiz algumas alterações, para não dar erro no console: jQuery(document).ready(function($){ $('.cccover img').attr('src','patch/to/covers/' + $('.ccartist').text() + '.jpg'); }); Mesmo assim não funcionou. Coloquei o código antes do </body>. Commented 8/05/2020 às 19:03
  • Tem como vc ver pra mim numa página de teste aqui? radiover.co/teste/test.html Commented 8/05/2020 às 20:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .