0

me estan pidiendo trasladar lo mas que pueda mi codigo js a jquery. El inconveniente es que estoy muy confundido de como hacerlo. Pude resolver una parte pero no sabria como pasar lo siguiente:

Este es el jquery que pude pasar.

$(function() {
$(".btn-danger").on("click", removerCarritoProducto);
$(".carrito-cantidad-input").on("change", cantidadModificado);
$(".boton-agregar").on("click", agregarCarritoClick);

$(".btn-purchase").eq(0).on("click", compradoClick);
});

No se como pasar esto a jquery:

function compradoClick() {
alert("¡Gracias por tu compra!")
let carritoProductos = document.getElementsByClassName('carrito-productos')[0]
while (carritoProductos.hasChildNodes()) {
    carritoProductos.removeChild(carritoProductos.firstChild)
}
updateCarritoTotal()
}

function removerCarritoProducto(event) {
let botonClick = event.target
botonClick.parentElement.parentElement.remove()
updateCarritoTotal()
}

function cantidadModificado(event) {
let input = event.target
if (isNaN(input.value) || input.value <= 0) {
    input.value = 1
}
updateCarritoTotal()
}

function agregarCarritoClick(event) {
let button = event.target
let tiendaProducto = button.parentElement.parentElement
let titulo = tiendaProducto.getElementsByClassName("nombre-producto")[0].innerText
let precio = tiendaProducto.getElementsByClassName("precio-producto")[0].innerText
let imageSrc = tiendaProducto.getElementsByClassName("imagen-producto")[0].src
addItemToCart(titulo, precio, imageSrc)
updateCarritoTotal()
}
3
  • 2
    Hola, David. No te encariñes con Jquery. Don't get me wrong, es ULTRA ÚTIL Y POTENTE, sin embargo, te irá mejor aprendiendo ES6. Javascript se ha convertido en un lenguaje maduro y versátil, y no tiene mucho sentido utilizar jquery en, por ejemplo, VueJs, Angular, NodeJs, React, etc. Anyway, sólo una opinión.
    – Arriel
    Commented el 15 dic. 2021 a las 13:45
  • @Arriel si vien las tecnologias que mencionas son muy potentes, requieren de cierto aprendizaje, y quizas no merece la pena migrar una aplicacion completa. Commented el 15 dic. 2021 a las 15:47
  • @JorgeMontejo. Estoy de acuerdo con tu apreciación. No es contraria, tampoco, a mi recomendación. Lo que estoy diciendo es, si bien Jquery es potente (yo lo uso extensivamente cuando trabajo con ASP.NET MVC5), será mejor para David dominar ES6, puesto que Javascript puede hacer TODO lo que hace jquery.
    – Arriel
    Commented el 15 dic. 2021 a las 16:15

1 respuesta 1

0

que tal esperando que estes bien

No comprendo cual es la intención de sobrescribirlo en Jquery, pero te paso las lineas de código que sobreescribo, disculpa no lo pude probar, pero espero te pueda ayudar a dar idea de que funciones requieres para que funcione:

     function compradoClick() {
    alert("¡Gracias por tu compra!")
    // lectura de todas las clases que tengan carrito-productos
    $('.carrito-productos').each(function (index, item) {
        if ($(item).children().length > 0) {
            $(item).find(":first-child").remove();
        }
    });
    updateCarritoTotal()
}

    
function removerCarritoProducto(event) {
    let botonClick = $(event.target)
    botonClick.parent().parent().remove()
    updateCarritoTotal()
}

function cantidadModificado(event) {
    let input = $(event.target)
    if (isNaN(input.val()) || input.val() <= 0) {
        input.val(1)
    }
    updateCarritoTotal()
}

function agregarCarritoClick(event) {
    let button = $(event.target)
    let tiendaProducto = button.parent().parent();
    let titulo = tiendaProducto.find(".nombre-producto").first().text();
    let precio = tiendaProducto.find("precio-producto").first().text();
    let imageSrc = tiendaProducto.find("imagen-producto").first().attr("src")
    addItemToCart(titulo, precio, imageSrc)
    updateCarritoTotal()
}

Saludos y Dios te bendiga

1
  • Hola! Es una tarea que nos dio el profesor para el curso en donde estoy. En un ratito lo pruebo. Muchisimas gracias por tu respuesta
    – David Yoo
    Commented el 15 dic. 2021 a las 13:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.