6

Como posso colocar determinadas imagens numa div usando jquery através de um clique no botão?

Segue o html:

         <div>
            <button id="btn2015" class="btn">2015</button>
            <button id="btn2014" class="btn">2014</button>
            <button id="btn2013" class="btn">2013</button>
            <button id="btn2012" class="btn">2012</button>
        </div>
        <div id="conteudo">

        </div>

Dependendo de cada botão clicado, a div conteudo será esvaziada e serão colocadas as imagens de acordo com o botão. Seguem os nomes das imagens:

imagem_piscina_2015.jpg
imagem_sala_2015.jpg
imagem_escrito_2015.jpg

Além dessas, existem várias outras com o mesmo nomes, só os anos terminando com os anos diferentes. Como posso fazer com que cada botão, chame apenas as imagens de acordo com os seus respectivos anos?

5
  • O que você já tentou fazer?
    – Zignd
    Commented 22/11/2015 às 20:18
  • eu fiz um evento de clique para cada botão. A primeira coisa que eu fazia era esvaziar a div conteudo. Depois tentei pegar o nome da imagem que está no mesmo diretório do arquivo, mas sem sucesso. :(
    – DiChrist
    Commented 22/11/2015 às 20:20
  • Uma imagem por botão ou 3 imagens por botão?
    – Sergio
    Commented 22/11/2015 às 20:20
  • use atributo data nos botões e nele coloque a URL do seu SITE, algo como: <button id="btn2015" class="btn" data-img="/imgs/imagem_piscina_2015.jpg">2015</button>, assim no evento click, você ler o atributo e da um append na div#conteudo, ou já deixa uma imagem lá(com display:none), e troca o src com jquery ($("img").attr("src",link_img) e da um efeito nela para aparecer, com fadeIn(x) onde x é o tempo em MS.
    – Ale
    Commented 22/11/2015 às 20:21
  • 1
    nesse caso 3, mas to tentando fazer de um jeito que se pegue o término da palavra, se clica no botão 2015, as imagens que terminem em 2015 aparecem, se for no botão 2014, as imagens que terminem em 2014 e assim por diante
    – DiChrist
    Commented 22/11/2015 às 20:22

3 Respostas 3

5

Fica uma sugestão:

var imagens = ['imagem_piscina_2015.jpg',
    'imagem_sala_2015.jpg',
    'imagem_escrito_2015.jpg'];

function criarImagem(nr) {
    return imagens.map(function (src) {
        var img = document.createElement('img');
        img.src = src.split('2015').join(nr);
        return img;
    });
}
$('button').on('click', function () {
    var ano = this.id.slice(3);
    $('#conteudo').html(criarImagem(ano));
});

jsFiddle: http://jsfiddle.net/2uasu6r9/

Este código faz com que cada vez que um botão seja carregado seja extraído o ano e passado a uma função. Essa função cria imagens (tantas quatos urls/nomes forem dados) e depois insere-as dentro da div #conteudo, re-escrevendo o seu conteúdo.

Sugiro adaptares $('button') para ser mais exato no seletor e também colocar os url corretos nas imagens para apontares para o sitio certo. Nessa array ou dentro da função, via uma variável de configuração.

2
  • Eu só não entendi o que você fez nessa linha var ano = this.id.slice(3);
    – DiChrist
    Commented 22/11/2015 às 21:04
  • @DiegodeSouzaSilva a ideia é só usar o ano na string btn2015. Com o slice produzo uma nova string que começa depois das 3 primeiras letras. O this é o botão clicado e o id é a ID desse botão.
    – Sergio
    Commented 22/11/2015 às 21:11
2

Uma alternativa das demais para seu caso é:

@Edit: Seguindo algumas sugestões, indicadas pelo amigo @Sergio, de melhoria considerável no código, segue alterado

var imagens = {
  2015: ['http://www.sulandes.com.br/painel/arquivos/categorias/7cbcd56e187b498d6dd7603cd8250b24.png', 'http://4.bp.blogspot.com/-0FEJMBAc71c/VJbkENOA6qI/AAAAAAAAD2I/uYQiy_Xo5Us/s1600/2015-feliz%2Bano%2Bnovo-16.png'],
  2014: ['http://www.asacd.org.br/images/2014-calendrier.jpg', 'http://www.rio2016.com/sites/default/files/imagecache/switcher_710x450_rounded_corners/2014-foto_0.jpg'],
  2013: ['http://aclumontana.org/wp-content/uploads/2014/01/2013.jpg', 'http://www.jornalistasconcurseiros.com.br/blog/wp-content/uploads/2013/01/2013.jpg']
};

document.addEventListener('click', function(e) {
  var id = e.target.id;
  if(['2015', '2014', '2013'].indexOf(id) !== -1) {
    var conteudo = document.getElementById('conteudo');
    conteudo.innerHTML = '';
    Array.prototype.forEach.call(imagens[id], function(arr) {
      var img = document.createElement('img');
      img.src = arr;
      conteudo.appendChild(img);
    });
    console.log(conteudo);
  }
});
div img {
    width: 100px;
}
<button id="2015">2015</button>
<button id="2014">2014</button>
<button id="2013">2013</button>
<div id="conteudo"></div>

Neste código foi declarado um objeto images contendo atributos com nome referente ao ano e valor contendo um array com a url das imagens. Também foi declarado uma event listener para detectar eventos de click referente aos botões, este evento chama uma função que verifica o ano, limpa o conteúdo anterior e percorrendo o array, cria elementos <img> atribuindo a url ao seu src.

Veja funcionando aqui no jsfiddle

2
  • 1
    Somente sugestão, acho que o código podia ser mais claro assim: jsfiddle.net/go221ezy
    – Sergio
    Commented 22/11/2015 às 22:28
  • @Sergio realmente, a validação de id que usou com certeza é mais "limpa", irei alterar meu código com base em sua sugestão, obrigado. Commented 23/11/2015 às 3:01
2

Eu sugiro você criar um array, onde os indices serão os anos, e os valores suas respectivas imagens, algo como:

arr['2015'] = "imgs/img_de_2015, imgs/img2_de_2015";

arr['2016'] = "imgs/img_de_2016, imgs/img2_de_2016";

e no evento click do botão, você obter o ano no qual ele se refere(este você pode colocar no atributo data-ano por exemplo).

<button class="btn_ano" data-ano="2015">2015</button> $("button.btn_ano").click(function(){ ano = $(this).attr('data-ano'); imgs_arr = arr[ano].split(","); });

E logo após isso, fazer um laço para colocar as imagens na view, tipo:

$(imgs_arr).each(function(i){ $("div#conteudo").append("<img src='"+imgs_arr[i]+"'/>"); });

Claro, se ficar lento(muitas imagens), você pode passar para uma variável, e só depois dar um append na div#conteudo.

Algo como:

imgs_html = ""; $(imgs_arr).each(function(i){ imgs_html.= "<img src='"+imgs_arr[i]+"'/>"; }); $("div#conteudo").append(imgs_html);

Espero ter ajudado!

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 .