Placing images in a div with jquery

6

How can I put certain images in a div using jquery with a click of a button?

Follow 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 content div will be emptied and the images will be placed according to the button. Here are the names of the images:

imagem_piscina_2015.jpg
imagem_sala_2015.jpg
imagem_escrito_2015.jpg

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

    
asked by anonymous 22.11.2015 / 21:16

3 answers

2

An alternative to the others for 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 we have declared a images object containing attributes with name for the year and value containing an array with the url of the images. It also declared an event listener to detect click events for buttons, this event calls a function that checks the year, clears the previous content and traverses the array, creates elements <img> by assigning the url to its src .

  

See working here at jsfiddle

    
22.11.2015 / 21:48
5

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: link

This code causes each time a button is loaded to extract the year and pass it to a function. This function creates images (so many urls / names are given) and then inserts them into the #conteudo div, rewriting its contents.

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, you would see a configuration variable.

    
22.11.2015 / 21:27
2

I suggest you create an array, where the indices will be the years, and the values their 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 click event of the button, you get the year in which it refers (this you can put in the attribute date-year 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, type:

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

Of course, if it gets slow (lots of images), you can move to a variable, and only then give an 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 have helped!

    
22.11.2015 / 21:40