0

Estoy desarrollando una aplicación web pero tengo un problema. hay unos elementos en un array, es un array de objetos. Cada posición tiene su nombre, precio etc. Los he listado mostrando sus datos, ya lo hice pero ahora le agregué un botón a cada uno, y como se repite, se los agrega a todos.

Lo que quiero es que cuando les de clic al botón que se cambie de color del elemento pero solo de ese, no de todos, y que aparte cuando cargue la página nuevamente ese cambio se quede guardado, estaba pensando en localstorage pero no sé cómo.

articulos.map((item) =>(
    <div key={item["Id"]} className="targeta">
        <div className="img-articulo">
            <img src={ruta+item["Imagen"]} alt="imagen-articulo"/>
        </div>

        <h2>{item["Titulo"]}</h2>
        <p>{item["Descripcion"]}</p>
        <h1>${item["Precio"]}</h1>
        
        <div className={cont_canti+item["Id"]}> 
            <NumericInput 
              id={item["Id"]}
              className="form-control " 
              value={1} 
              min={1} 
              max={10} 
              step={1} 
              precision={0} 
              size={2} 
              mobile
              />
        </div>
      
        <button type="button" className={item["Id"]} onClick={()=>{Ajax(item["Id"])}}>Reservar</button>
        <Link to="/Carrito" id="btn-carrito" className={btncarrito+item["Id"]}>Ver carrito</Link>
    </div>
));

Lo que he podido hacer esta ahora es cambiar el estilo de cada elemento pero la idea es guardar ese estilo localmente o de otra forma que cuando refresque la página, siga los estilos aplicados.

AQUÍ LLAMA CADA VEZ QUE SE DA CLIC AL BOTÓN

function Ajax(id){ 
    var cant = document.getElementById(id).value;
  
    var http = new XMLHttpRequest();
    http.open("GET","http://localhost/ecomerce/ecommerce-pizza/src/Api/Ajax.php?id="+id+"&cant="+cant,true);
      
    http.onreadystatechange = function(){

        if(this.readyState === 4 && this.status === 200){

            var get = localStorage.getItem("cantidad");
            localStorage.setItem("cantidad",Number(cant)+Number(get));
            console.log(this.responseText);
       
        }

    }
    http.send();

    document.getElementsByClassName(id)[0].style.display="none";
    document.getElementsByClassName("cantidad"+id)[0].style.display="none";
    document.getElementsByClassName("btn-carrito"+id)[0].style.display="block";
       
    
}

No le pongan atención a la respuesta del AJAX, eso es aparte.

La función Ajax está agregando ese dato guardado en un archivo JSON pero después de eso es lo importante, que es intentar con clases cambiar su estilo.

SERÍA DE GRAN AYUDA QUE ALGUIEN ME DIERA UNA RESPUESTA.

5
  • Hola @YOSIP. Trata de compartir tu código para completar la pregunta. Commented el 14 dic. 2020 a las 0:07
  • 1
    Listo amigo ya lo actualice Commented el 14 dic. 2020 a las 0:16
  • Queres que al darle click al boton de un articulo cambie el color del boton de ese articulo?
    – Franco
    Commented el 14 dic. 2020 a las 1:30
  • Hay 2 botones uno esta oculto y el otro se muestra, La idea es que cuando le de click al botón que se muestra ese desaparezca y el que esta oculto se muestre. Es como un carrito el primer botón dice agregar y el que esta oculto dirá agregado pero necesito que se quede guardado en la página. Commented el 15 dic. 2020 a las 1:46
  • Supongo que con "al otro boton" te referis al <Link> no?
    – Franco
    Commented el 16 dic. 2020 a las 2:04

1 respuesta 1

0

Tu error es que le estas asignando mal la clase al poner className={btncarrito+item["Id"]} no le estas pasando el valor del id del Item, si no que le estas pasando literalmente +item["Id"] como string, no como valor del id del item, para solucionarlo podrias usar los Template literals (su sintaxis es: ${expression}) para que te tome el valor del id en si y no como un string.

<Link style={{display: 'none'}} to="/Carrito" id="btn-carrito" className={`btncarrito${item['Id']}`}>
    Ver carrito
</Link>

luego en tu método Ajax obtienes el elemento y le pones el display block, para que se muestre.

const button = document.getElementsByClassName(`btncarrito${id}`)[0];
button.style.display = 'block';

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.