Estoy en un pequeño aprieto. Tengo varias tarjetas... con varios eventos de clic posibles (7) para ser exactos dentro de cada tarjeta.
He agregado la misma clase a todos ellos (cada evento de clic) con etiquetas de datos que devuelven valores diferentes.
Básicamente, quiero realizar un seguimiento de todos los eventos de clic (7) en diferentes momentos y verificarlos como uno por tarjeta.
Si el usuario hace algo dentro de la tarjeta, cuéntelo como un evento. Básicamente, estoy tratando de contar las vistas por tarjeta.
ahora mismo tengo algo asi
$(document).on("click", ".test", function() { console.log('Testing Stats View capture'); var that = $(this); var testStats = that.data('capture-stats'); console.log(testStats); }));contar vistas por tarjeta
Puede almacenar el conteo en cada tarjeta usando this.data() :
$(document).on("click", ".card", function() { var clickcount = $(this).data("clickcount") || 0; clickcount++; $(this).data("clickcount", clickcount); console.log($(this).text() + " clicked: " + clickcount); }); .card { cursor: pointer; user-select: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='card'>card 1</div> <div class='card'>card 2</div> <div class='card'>card 3</div>Puede agregar un atributo de datos al elemento que desencadena el evento, al final de su controlador, y verificar su presencia al principio, como condición para realizar una lógica determinada:
$(document).on("click", ".test", function() { console.log('Testing Stats View capture'); var that = $(this); //if the prop data-event-triggered is not set yet for this element if ( !that.data('event-triggered') ){ var testStats = that.data('capture-stats'); //adds the prop data-event-triggered for this element that.data('event-triggered','true'); console.log('event triggered-${testStats}'); } }); .test { width: 100px; height: 100px; background: gray; cursor: pointer; margin-bottom:10px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="test" data-capture-stats="1">1</div> <div class="test" data-capture-stats="2">2</div>