Counter Click Javascript Jquery

Question

I am applying image attributes and names via Jquery through an array of images and names. The image below illustrates the images of the loaded array.

When I click I display the name of the image contained in the array. Below the image illustrates what happens when the event is held click, the names are displayed below the images, in the case ai only two images were clicked.

I have to count the clicks too. However I do not know how to perform the same event in the code below:

My html code looks like this:

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

And this is my jQuery with event 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

Answer 1

Man tries something like this:

``

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

``

And this is my jQuery with event click.

var imageobject = [ { src: 'cat01.jpg', am: 'Cat 01', Count: 0, }, { src: 'cat02.jpg', am: 'Cat 02', Count: 0, }, { src: 'cat03.jpg', am: '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'));

})