Cordial Saludo
Tengo el siguiente codigo html:
<div id="contenido" class="justify-content-center align-items-center">
<div class="hora hora-no-disponible"><p>12:00 am</p></div>
<div class="hora hora-no-disponible"><p>1:00 am</p></div>
<div class="hora hora-no-disponible"><p>2:00 am</p></div>
<div class="hora hora-no-disponible"><p>3:00 am</p></div>
<div class="hora hora-no-disponible"><p>4:00 am</p></div>
<div class="hora hora-no-disponible"><p>5:00 am</p></div>
<div class="hora hora-no-disponible"><p>6:00 am</p></div>
<div class="hora hora-no-disponible"><p>7:00 am</p></div>
<div class="hora hora-no-disponible"><p>8:00 am</p></div>
<div class="hora hora-no-disponible"><p>9:00 am</p></div>
<div class="hora hora-no-disponible"><p>10:00 am</p></div>
<div class="hora hora-no-disponible"><p>11:00 am</p></div>
<div class="hora" data-numerohoraapp="12:00:00" data-numerohorafinalapp="12:59:59"> <p>12:00 pm</p></div>
<div class="hora" data-numerohoraapp="13:00:00" data-numerohorafinalapp="13:59:59"><p>1:00 pm</p></div>
<div class="hora hora-no-disponible"><p>2:00 pm</p></div>
<div class="hora seleccionado" data-numerohoraapp="15:00:00" data-numerohorafinalapp="15:59:59"><p>3:00 pm</p></div>
<div class="hora" data-numerohoraapp="16:00:00" data-numerohorafinalapp="16:59:59"><p>4:00 pm</p></div>
<div class="hora" data-numerohoraapp="17:00:00" data-numerohorafinalapp="17:59:59"><p>5:00 pm</p></div>
<div class="hora seleccionado" data-numerohoraapp="18:00:00" data-numerohorafinalapp="18:59:59"><p>6:00 pm</p></div>
<div class="hora seleccionado" data-numerohoraapp="19:00:00" data-numerohorafinalapp="19:59:59"><p>7:00 pm</p></div>
<div class="hora" data-numerohoraapp="20:00:00" data-numerohorafinalapp="20:59:59"><p>8:00 pm</p></div>
<div class="hora hora-no-disponible"><p>9:00 pm</p></div>
<div class="hora hora-no-disponible"><p>10:00 pm</p></div>
<div class="hora hora-no-disponible"><p>11:00 pm</p></div>
Y tengo la función llamada seleccionarRangoFechas(numeroreserva) que recibe un parámentro llamado numeroreserva que es la cantidad de clic que se deben realizar:
function seleccionarRangoFechas(numeroreserva) {
if (numeroreserva === 0) {
$(".hora").click(function () {
$(".hora").removeClass("seleccionado");
let horaMostrar = $(this).text();
let aforousado = parseInt($(this).data("aforo"));
let horario = $(this).data("horario");
let horaini = $(this).data("horaini");
let horafin = $(this).data("horafin");
$(this).addClass("seleccionado");
$("#HoraReserva").text(horaMostrar);
$("#spanHoraReserva").removeClass("d-none");
$("#idHora").val(horario);
$("#horaini").val(horaini);
$("#horafin").val(horafin);
});
} else {
var divsSeleccionados = [];
var parrafoSeleccionados = document.getElementById("HoraReserva");
var horas = document.querySelectorAll(".hora");
horas.forEach(function (hora) {
hora.addEventListener("click", function () {
if (hora.classList.contains("hora-no-disponible")) {
return;
}
var aforousado = hora.getAttribute("data-aforo");
if (hora.classList.contains("seleccionado")) {
hora.classList.remove("seleccionado");
var index = divsSeleccionados.indexOf(hora);
if (index > -1) {
divsSeleccionados.splice(index, 1);
}
} else {
if (divsSeleccionados.length < numeroreserva) {
if (divsSeleccionados.length === 0) {
hora.classList.add("seleccionado");
divsSeleccionados.push(hora);
} else {
hora.classList.add("seleccionado");
divsSeleccionados.push(hora);
}
}
}
actualizarParrafoSeleccionados();
});
});
function actualizarParrafoSeleccionados() {
if (divsSeleccionados.length === 0) {
parrafoSeleccionados.textContent = "Hora";
$("#spanHoraReserva").addClass("d-none");
} else {
var textoSeleccionado = divsSeleccionados.map(function (div) {
return div.querySelector("p").textContent;
}).join(", "); // Une los textos seleccionados con una coma y un espacio
$("#idHora").val(textoSeleccionado);
parrafoSeleccionados.textContent = textoSeleccionado;
$("#spanHoraReserva").removeClass("d-none");
}
}
}
Si el parámetro numeroreserva es 3, lo que quiero hacer es que si selecciono el horario 3:00pm-4:00pm-5:00pm me lo permita seleccionar (este proceso ya lo hace) y lo que necesito, por favor, es que si selecciono 3:00pm-5:00pm-6:00pm no lo permita ya que hay un hora de intermedio entre las 3:00pm y 5:00pm.
Les agredezco su ayuda
3:00 pm
, le marcas de forma automática las4
y las5
. Repito, no sé si entendí, pero yo lo haría así. Te evitas tanto rollo y es más amigable para el usuario.