0

Estou aplicando atributos e nomes de imagens via Jquery através de um array de imagens e nomes. A imagem abaixo ilustra as imagens do array carregadas.

Imagens carregadas pelo Array

Quando eu clico exibo o nome da imagem contido no array. Abaixo a imagem ilustra o que ocorre quando é realizado o evento click, os nomes são exibidos embaixo das imagens, no caso ai só duas imagens foram clicadas.

Array de nomes carregado após evento click

Tenho que contabilizar os clicks também. Porém não sei como realizar esse mesmo evento no código abaixo:

Meu código html esta assim:

<div class="col-md-3"> <figure class="catImag"><img src=""></figure> <span class="count"></span> onde vai o contador </div>

E esta é o meu jQuery com evento click.

 const catsImages = ['cat01.jpg', 'cat02.jpg', 'cat03.jpg', 'cat04.jpg', 'cat05.jpg'];
    const catsName = ['Cat KiKI', 'Cat Edi', 'Cat Didi', 'Cat Kely', 'Cat Vivi'];

    let image = [...catsImages];
    let name = [...catsName];

    console.log(image);
    console.log(name);

    let count = 0;//Variavel contador

    $.each($('.catImag img'), function(index) {
        $(this).attr({
            src: image[index],
            alt: name[index]
        });
    }); //Update Cat cria os atributos para receber a imagem

    $.each($('figure'), function(index, el) {

        $(this).one('click', function(event) {
            /* Act on the event */
            $(this).append('<figcaption>' + name[index] + '</figcaption>');
        });

    });// update click name, exibe o nome do cat clicado
4
  • 1
    Não entendi o uso desta linha: let $span = $('img').append('<span>' + count + '</span>');... vc quer fazer um append dentro de uma imagem? Uma imagem é um elemento fechado e não aceita append. Poderia explicar melhor?
    – Sam
    Commented 18/12/2018 às 17:10
  • Essa linha eu esqueci de tirar era um teste que eu estava realizando. Ignore ela. Commented 18/12/2018 às 18:04
  • Removi a resposta. Tem que ajustar a pergunta com o código correto. Noa comentários vc está tirando e adicionando códigos. Tem é que editar a pergunta com o que vc quer e o código correto.
    – Sam
    Commented 18/12/2018 às 19:05
  • ok vou reformular a pergunta aqui. Commented 18/12/2018 às 19:10

1 Resposta 1

1

Man tenta algo assim:

``

    </figure>
    <figure class="catImag">
    <img src="" alt="">
        
    </figure>
    <figure class="catImag">
    <img src="" alt="">
``

E esta é o meu jQuery com evento click.

var imageObject = [ { src: 'cat01.jpg', alt: 'Cat 01', count: 0, }, { src: 'cat02.jpg', alt: 'Cat 02', count: 0, }, { src: 'cat03.jpg', alt: 'Cat 03', count: 0, }, ];

$('.catImag img').each(function(i, el) {

$(this).attr( { 'src': imageObject[i].src, 'alt': imageObject[i].alt, 'data-count': imageObject[i].count } );

$(this).after('' + imageObject[i].alt + ''); $(this).after('');

})

$('.catImag ').click(function(){

var countIni = $(this).children('img').attr('data-count');

$(this).children('span').text(countIni = parseInt(countIni, 10) + 1);
$(this).children('img').attr('data-count',countIni)


console.log($(this).children('span'));

})
4
  • Hernani, eu entendi era melhor criar um array de objetos mesmo. retirei apenas a linha $(this).after('<figcaption>' + imageObject[i].alt + '</figcaption>'); porque o nome não deve ser exibido antes do click. Somente no click. Obrigado mano. Você salvou o dia, o ano quero dizer. ;) Commented 19/12/2018 às 18:07
  • Eu mantive esta parte do código porque o nome é exibido após o click. $.each($('figure'), function(index, el) { $(this).one('click', function(event) { / Act on the event / $(this).append('<figcaption>' + image[index].alt+ '</figcaption>'); }); }); Commented 19/12/2018 às 18:16
  • Então vc poderia colocar isso dentro do metodo que faz a contagem pq ele vai ser executado quando clicar do mesmo jeito e não precisaria rodar um $.each. Quando você escuta um evento o jquery te passa o elemento através do $(this), então vc nao precisa de um $each pra escutar evento..
    – user131072
    Commented 19/12/2018 às 18:33
  • Ok. Obrigado mano. Commented 19/12/2018 às 23:07

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 .