``
<figure class="catImag">
<img src="" alt="">
</figure>
<figure class="catImag">
<img src="" alt="">
</figure>
<figure class="catImag">
<img src="" alt="">
</figure>
``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 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('<figcaption>' + imageObject[i].alt + '</figcaption>');
$(this).after('<span></span>');
})
$('.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'));
})
Ficou meio ruim aqui não manjo publicar as paradas aqui ainda.. Fiz um exemplo: inserir a descrição do link aqui