Estoy trabajando en un proyecto y básicamente tengo algunos problemas con cosas para mi sitio web. Este es un poco difícil para mí, tengo algunas ideas pero no sé cómo hacerlas en mi código javascript. Tengo 98 divs (es un calendario donde puedes seleccionar diferentes horas todos los días para reservar espacios). Hay un resumen (más o menos lo mismo en el sitio web comercial) que quiero que diga cuántas máquinas tragamonedas seleccionó. Pero el problema es que tengo como dije 98div, así que quiero hacerlo en una función. Sobre las franjas horarias que quieras reservar, puedes pinchar sobre ella (la selecciona) y si vuelves a pulsar sobre ella la deselecciona. Quiero que pueda seleccionar tantos espacios como desee, y el resumen muestra cuántos seleccionó, luego puede pasar al siguiente paso. ¡Aquí está mi código si tienen algunas ideas!
function x1(e) { var target = e.target, count = +target.dataset.count; target.style.backgroundColor = count === 1 ? "#707070" : 'black'; target.dataset.count = count === 1 ? 0 : 1; target.innerHTML = count === 1 ? '' : 'réserver'; target.classList.toggle('Resatxt'); target.classList.toggle('unselectable'); }En realidad, este código es para la selección de las ranuras (se pone de fondo negro cuando haces clic en él y luego vuelve al color normal cuando lo deseleccionas). Pero creo que puedo hacer lo que quiera con esto. Pensé en incrementar +1 cuando hacemos clic en el div, pero el problema de que no sé cómo resolverlo es que cuando lo deseleccionas, tienes que hacer -1, pero estoy un poco perdido.
Traté de ser claro, pero ik eso no es realmente. Si ustedes tienen algunas ideas, háganlo. Muchas gracias
es bueno ver que te unes a la comunidad de programación. Espero haberte entendido correctamente e hice un ejemplo simple y mínimo para presentarte cómo puedes lograr lo que quieres. ¡Esto es solo una idea, no se lo tome demasiado en serio y escriba su propia lógica para manejar la funcionalidad!
const divs = 98; const list = document.querySelector("#list"); const selectedList = document.querySelector("#selectedList"); let selected = []; let elementsAdded = 1; const onSelectDiv = (element) => { const elementCopy = element.cloneNode(true); elementCopy.id += "-copy"; selected = [ ...selected, { id: elementsAdded, elementId: element.id } ]; elementsAdded += 1; selectedList.appendChild(elementCopy); }; const onClick = (e) => { if (e.target.className.includes("selected")) { e.target.classList.remove("selected"); elementsAdded -= 1; const elementToDelete = selected.findIndex( (x) => e.target.id === x.elementId ); selectedList.removeChild(selectedList.childNodes[elementToDelete + 1]); selected = selected.filter((x) => x.elementId !== e.target.id); return; } onSelectDiv(e.target); e.target.className += " selected"; }; for (let i = 0; i < divs; i++) { const div = document.createElement("div"); div.innerHTML += i; div.className += "div"; div.id = i; div.addEventListener("click", function (event) { onClick(event); }); list.appendChild(div); } .view { display: flex; flex-direction: 'column'; } #list { display: flex; width: 400px; max-width: 500px; flex-wrap: wrap; } .div { padding: 5px; background-color: black; cursor: pointer; color: white; border-radius: 10px; margin: 10px; } .selected { background-color: red; color: white; } <div class="view"> <div> <p>Elements:</p> <div id="list"> </div> </div> <div> <p>Selected:</p> <div id="selectedList"> </div> </div> </div>