Place images in a div with jquery

Question

How can I place certain images in a div using jquery by clicking the button?

Follows the 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>

Depending on each button clicked, the contents div will be emptied and the images will be placed according to the button. Follow the names of the images:

imagem_piscina_2015.jpg
imagem_sala_2015.jpg
imagem_escrito_2015.jpg

Besides these, there are several others with the same names, only the years ending with the different years. How can I make each button, call only the images according to their respective years?

Answer 1

Here’s a suggestion:

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/

This code causes each time a button is pressed to be extracted the year and passed to a function. This function creates images (so many urls/names are given) and then inserts them into the div #conteudo, re-writing your content.

I suggest you adapt $('button') to be more accurate in the selector and also put the correct url in the images to point to the right place. In this array or within the function, via a configuration variable.

Answer 2

I suggest you create an array, where the indices will be the years, and the values your respective images, something like:

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

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

and in the event button click, you get the year in which it refers(this you can put in the date-year attribute for example).

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

And right after that, make a loop to put the images in the view, like:

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

Of course, if it gets slow(too many images), you can move on to a variable, and only then append to div#conteudo.

Something like:

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

I hope I’ve helped!

Answer 3

One too many alternative to your case is:

@Edit: Following some suggestions, indicated by the friend @Sergio, considerable improvement in the code, follows changed

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>

In this code an object has been declared images containing attributes with year name and value containing an array with image url. It has also been declared an Event Listener to detect click events referring to buttons, this event calls a function that checks the year, clears the previous content and traversing the array, creates elements <img> assigning the url to your src.

See working here on jsfiddle