Estoy tratando de usar JQuery para actualizar un atributo data después de hacer clic en un botón. Por favor, eche un vistazo a lo que he intentado a continuación. Cuando hago clic en el div con la clase previous-wrapper , todo el bloque está bien actualizado y el atributo data-nb obtiene el valor correcto. Pero, cuando hago clic en este div por segunda vez, data-nb -attribute obtiene el valor NaN. .
¿Hay otra forma de actualizar y recuperar dinámicamente el valor de este atributo?
$(function(){ $(document).on('click','.previous-wrapper',function(){ var get_nb = $(this).find('.previous'); get_nb = get_nb.data("nb"); get_nb = parseInt(get_nb) //Dom to update arr_left = $('<i/>', { className: 'fa-solid fa-arrow-left' }); previous = $('<div/>', { className: 'previous', 'data-nb': get_nb-5, html: "Previous" }); //Question 2. How to append previous to arrow_left $(".previous-wrapper").html(previous); }); }); .previous-wrapper{ cursor: pointer; background:red; width:100px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="previous-wrapper"> <i class="fa-solid fa-arrow-left"></i> <span class="previous" data-nb="100">Previous</span> </div>También me gustaría saber cómo agregar múltiples DOM creados por JQuery.
Está sobrescribiendo el HTML con un atributo no válido de "nombre de clase" en lugar de "clase", lo que significa que en la segunda interacción $('.previous') no coincidirá con nada.
Versión corregida de su código:
$(document).on('click', '.previous-wrapper', function() { var get_nb = $(this).find('.previous'); get_nb = get_nb.data("nb"); get_nb = parseInt(get_nb) //Dom to update arr_left = $('<i/>', { class: 'fa-solid fa-arrow-left' }); previous = $('<div/>', { class: 'previous', 'data-nb': get_nb - 5, html: "Previous" }); // including both elements at once: $(".previous-wrapper").html([arr_left, previous]); console.log($('.previous-wrapper').html()) }); .previous-wrapper { cursor: pointer; background: red; width: 100px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="previous-wrapper"> <i class="fa-solid fa-arrow-left"></i> <span class="previous" data-nb="100">Previous</span> </div>Sin embargo, sería mucho, mucho más simple, simplemente actualizar el atributo que desea actualizar, en lugar de volver a escribir todo el HTML con cada clic:
$(document).on('click', '.previous-wrapper', function() { let el = $(this).find('.previous') // update the data attribute using .attr() instead of .data() because jQuery handles .data internally; it's not reflected in the DOM el.attr('data-nb', Number(el.attr('data-nb')) - 5); console.log($('.previous-wrapper').html()) }); .previous-wrapper { cursor: pointer; background: red; width: 100px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="previous-wrapper"> <i class="fa-solid fa-arrow-left"></i> <span class="previous" data-nb="100">Previous</span> </div>