Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

135
Vistas
switching or hide/show links after week completed

I have 4 links here and I want to show only one link(different lunch every week) at a time. Then showing first lunch after 4 weeks completed. Starting from Monday.

<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>

Any help is greatly appreciated.

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

I have figured out a simpler way to switch lunch menu based on week numbers

<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 to do the following

/*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;
}

javascript code to complete the task

//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");
    }
about 4 years ago · Juan Pablo Isaza Denunciar

0

there is a function I have found in StackOverflow this link this function will give you the number of weeks in a month then you can decide to enable which link

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]}`
}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda