Tengo un filtro y carga más página de listado, filtro individualmente y carga más trabajo, pero lo que realmente quiero que no funcione, creo que quedará claro si le muestro el código para explicar mi situación, hasta ahora esto es lo que yo He intentado.

HTML:

 <div class="block-wrap"> <ul class="filter-cats"> <li><a href="#" data-filter="all">All</a></li> <li><a href="#" data-filter="cat">Cats</a></li> <li><a href="#" data-filter="dog">Dogs</a></li> </ul> <div class="animal-listing" id="list"> <div>Cat 1</div> <div>Cat 2</div> <div>dog 1</div> <div>Cat 3</div> <div>dog 2</div> </div> <button class="load-more" data-filter-id="all">Load More</button> </div>

Y la parte de jQuery es esta:

 $(function() { var el = $('.filter-cats').find('a'); el.on('click', function (e) { e.preventDefault(); var currentFilter = $(this), catId = $(currentFilter).data('filter'); $('.load-more').attr('data-filter-id', catId); }); $('.load-more').on('click', function () { var ct_filtr = $(this).data('filter-id'); console.log(ct_filtr); }) })

El problema al que me enfrento es que, cuando hago clic en cualquier filtro, digamos "Cats", establece "data-filter-id" con éxito en el botón con la clase load-more adicional, puedo ver que eso cambia al inspeccionar el elemento. Pero después de eso, cuando hago clic en el botón Cargar más, no me da el valor modificado de "identificación de filtro de datos", solo me da la primera identificación de filtro en la que se hizo clic. Sé que esto tiene algo que ver con el enlace de datos, no soy un desarrollador, entonces, ¿cómo puedo hacer que esto funcione correctamente? Cualquier información será muy apreciada.

En resumen, cuando hago clic en cualquier categoría de filtro, eso debería configurar el botón Cargar más data-filter-id y cuando hago clic en el botón Cargar más, necesito obtener ese valor para pasar a otra función.

Aquí está el enlace de codepen: https://codepen.io/salih24by7/pen/LYjRxXL