Necesito pasar al siguiente elemento. Mi código muestra 3 tarjetas diferentes y pone la opción en ddbb, pero cuando hago clic en la opción, necesito pasar la 'vista de pantalla' a la siguiente tarjeta cuando el éxito es correcto. Probé .next('.card').toggle() y .show() pero no funcionan, ¿algún consejo?
Mi plantilla:
{% for standard in standards %} <div class="card mx-auto mt-4 card-standard" style="width: 95%;" data-aos="fade-up"> ... </div> {% endfor %} <script type="text/javascript"> AOS.init({ duration: 1200, }) $(document).on('click', '.alternative', function () { const $this = $(this) const alternative_pk = $this.data('alternative-pk'); console.log(alternative_pk) const url = $('.tabla-standard').data('alternative-url'); $.ajax({ ... success: function (json) { if (json.success) { console.log("ok") } } }); $('.card-standard').next().show(); }) </script>Si alguien sabe como solucionar esto por favor comente
Veo algunas cosas aquí que le causarán problemas con lo que está tratando de hacer.
Primero, su llamada a $('.card-standard').next().show(); no sucede cuando el éxito está bien, sino que sucede inmediatamente después de que comienza la llamada AJAX. Con JavaScript, las funciones se ejecutan hasta el final, antes de que ocurra cualquier devolución de llamada anidada. Si desea cambiar las tarjetas en caso de éxito (cuando se ejecuta su devolución de llamada exitosa), debe cambiar al mismo tiempo que dice console.log("ok") .
En segundo lugar, obtendrá algunos resultados extraños de $('.card-standard').next().show(); , porque parece esperar que encuentre un solo elemento, pero eso va a encontrar todos los elementos con clase .card-standard . Luego, para cada uno, irá al siguiente y lo mostrará. Eso significa que mostrará todas las cartas excepto la primera, que deja intacta.
Tercero, en ningún momento ocultas la tarjeta actual. No sé cómo se ve tu interfaz de usuario, pero si solo una tarjeta debe estar en la pantalla a la vez, ¿no deberías ocultarla aquí también?
Tal vez debería poner en su manejador de éxito algo como esto:
$this.parent("card").hide(); $this.parent("card').next().show();