Tengo 4 enlaces aquí y quiero mostrar solo un enlace (almuerzo diferente cada semana) a la vez. Luego muestra el primer almuerzo después de 4 semanas completadas. A partir del lunes.
<div class="wrapper"> <a href="#" class="collection-item item-menu" data-id="1">Lunch Menu (Week #1)</a> <a href="#" class="collection-item item-menu" data-id="2">Lunch Menu (Week #2)</a> <a href="#" class="collection-item item-menu" data-id="3">Lunch Menu (Week #3)</a> <a href="#" class="collection-item item-menu" data-id="3">Lunch Menu (Week #4)</a> </div>Cualquier ayuda es muy apreciada.
Descubrí una forma más sencilla de cambiar el menú del almuerzo según los números de semana
<div class="hidden">Week Number is : <span id="week_number">0</span></div> <div class="wrapper"> <a href="#" class="d-none collection-item item-menu" id="lunch1">Lunch Menu (Week #1)</a> <a href="#" class="d-none collection-item item-menu" id="lunch2">Lunch Menu (Week #2)</a> <a href="#" class="d-none collection-item item-menu" id="lunch3">Lunch Menu (Week #3)</a> <a href="#" class="d-none collection-item item-menu" id="lunch4">Lunch Menu (Week #4)</a> </div>css para hacer lo siguiente
/*to hide week number div*/ .hidden { visibility: hidden; } span { color : #e91e63; } /*to hide all the lunch variants*/ .d-none { display:none; } /*to show spesific lunch variant depend on week number*/ .d-block { display:block; }código javascript para completar la tarea
//init date var date = new Date("2021-01-01"); document.getElementById("week_number").innerHTML =(getWeekOfMonth(date)); //get week number of date function getWeekOfMonth(date) { let adjustedDate = date.getDate()+ date.getDay(); let prefixes = ['0', '1', '2', '3', '4', '5']; return (parseInt(prefixes[0 | adjustedDate / 7])+1); } // all the lunch variants var lunch1 = document.getElementById("lunch1"); var lunch2 = document.getElementById("lunch2"); var lunch3 = document.getElementById("lunch3"); var lunch4 = document.getElementById("lunch4"); var value = document.getElementById("week_number").innerHTML; // adding css class to specific variant depending on value if(value=="1") { lunch1.classList.add("d-block"); } if(value=="2") { lunch2.classList.add("d-block"); } if(value=="3") { lunch3.classList.add("d-block"); } if(value=="4") { lunch4.classList.add("d-block"); } if(value=="5") { lunch1.classList.add("d-block"); } if(value=="6") { lunch2.classList.add("d-block"); }hay una función que he encontrado en StackOverflow este enlace esta función le dará la cantidad de semanas en un mes y luego puede decidir habilitar qué enlace
function weekOfTheMonth(date) { const day = date.getDate() const weekDay = date.getDay() let week = Math.ceil(day / 7) const ordinal = ['First', 'Second', 'Third', 'Fourth', 'Last'] const weekDays = ['Sunday','Monday','Tuesday','Wednesday', 'Thursday','Friday','Saturday'] // Check the next day of the week and if it' on the same month, if not, respond with "Last" const nextWeekDay = new Date(date.getTime() + (1000 * 60 * 60 * 24 * 7)) if (nextWeekDay.getMonth() !== date.getMonth()) { week = 5 } return `${ordinal[week - 1]} ${weekDays[weekDay]}` }