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.