Código HTML
$(".values").click(function(){ $(".values").each(function(){ var value = $(this).data('value'); alert(value); }); }) <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <p class="values" data-value="1">Value 1</p> <p class="values" data-value="2">Value 2</p> <p class="values" data-value="3">Value 3</p> <p class="values" data-value="4">Value 4</p> <p class="values" data-value="5">Value 5</p>El problema es que cuando hago clic en una etiqueta p específica, alerta a todas las etiquetas p con los valores de datos, y necesito que el evento de clic active una alerta con el valor de datos específico.
Simplemente elimine el bucle .each .
$(".values").click(function(){ var value = $(this).data('value'); alert(value); }) <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <p class="values" data-value="1">Value 1</p> <p class="values" data-value="2">Value 2</p> <p class="values" data-value="3">Value 3</p> <p class="values" data-value="4">Value 4</p> <p class="values" data-value="5">Value 5</p>Cuando está utilizando la selección de jQuery, no necesita recorrer cada elemento seleccionado para adjuntar el controlador de eventos. jQuery manejará eso internamente, solo tendrá que usar $(this) para apuntar al elemento en el que se hace clic en un momento dado
$('.values').click(function(){ console.log($(this).data('value')); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="values" data-value="1">Value 1</p> <p class="values" data-value="2">Value 2</p> <p class="values" data-value="3">Value 3</p> <p class="values" data-value="4">Value 4</p> <p class="values" data-value="5">Value 5</p>