Блог

Я не могу понять, как правильно настроить таргетинг и отобразить тег HTML id, когда соответствующий соответствующий JS-объект, содержащийся в массиве, имеет «живое» значение true.

Я хочу, чтобы цикл JS отображал ссылку в модуле расписания, только если этот идентификатор ссылки соответствует «ScheduleId» объекта и когда «живое» значение этого объекта равно true. Как мне настроить таргетинг и отобразить эту ссылку?

Смотрите мой HTML здесь:

 

<div class="test-schedule">
   <h2>Schedule</h2>
   <div><span>School of Ed</span><a class="link-class" id="ed">School of Ed link</a></div>
   <div><span>School of Humanities</span><a class="link-class" id="hss">School of Humanities link</a></div>
   <div><span>School of Science</span><a class="link-class" id="sci">School of Science link</a></div>
   <div><span>School of Nursing</span><a class="link-class" id="nursing">School of Nursing link</a></div>
</div>


<style>
.link-class{display:none}
</style>

 

JS здесь:

 const eventList = [

  {
    scheduleId: 'ed',
    live: 'true',
  },
  {
    scheduleId: 'hss',
    live: 'false',
  },
  {
    scheduleId: 'sci',
    live: 'false',
  },
  {
    scheduleId: 'nursing',
    live: 'false',
  },
];
 

Ссылка на Codepen:
https://codepen.io/lvl12sealclubber/pen/PoWbJZQ?editors=1011

Если я правильно понимаю, вы хотите, чтобы все ссылки были скрыты и отображали только некоторые на основе значения JS? Не могли бы вы просто сделать:

 .link-class {
    visibility: hidden;
}
 

 for (let event of eventList) {
    if (event.live) {
        document.getElementById(event.scheduleId).style.visibility="visible" 
    }
}
 

Если я понимаю, что вы хотите показать ссылку на это событие в зависимости от того, является ли событие активным для объекта events, вы можете попробовать что-то простое, например, создать класс, который будет отображать элемент следующим образом

 const eventList = [
  {
    scheduleId: "ed",
    live: "true",
  },
  {
    scheduleId: "hss",
    live: "false",
  },
  {
    scheduleId: "sci",
    live: "true",
  },
  {
    scheduleId: "nursing",
    live: "false",
  },
];

const checkLinks = () => {
  for (let event of eventList) {
    if (event.live === "true") {
      document.querySelector("#"   event.scheduleId).classList.add("show-link");
      console.log(event.scheduleId);
    }
  }
};

checkLinks(); 

 .link-class {
  display: none;
}

.show-link {
  display: inline-block;
  color: blue;
} 

     <div class="test-schedule">
      <h2>Schedule</h2>
      <div>
        <span>School of Ed </span
        ><a class="link-class" id="ed">School of Ed link</a>
      </div>
      <div>
        <span>School of Humanities </span
        ><a class="link-class" id="hss">School of Humanities link</a>
      </div>
      <div>
        <span>School of Science </span
        ><a class="link-class" id="sci">School of Science link</a>
      </div>
      <div>
        <span>School of Nursing </span
        ><a class="link-class" id="nursing">School of Nursing link</a>
      </div>
    </div> 

Я бы обновил тип данных для свойства ‘live’ до логического значения вместо строки.

В реальном мире это будет зависеть от данных, и вам не придется сравнивать даты, а просто проверить свойство ‘live’, если оно true или нет.

Если я правильно понимаю, когда пользователь попадает на эту страницу, вы вычисляете текущую дату / время и показываете, какое событие находится в режиме реального времени. Если это так, вы можете просто сравнить текущую дату / время и показать ссылку на ту, которая находится в режиме реального времени. Обновлять не нужно event.live . На самом деле, вы не должны обновлять свои данные через JS.

Кроме того, вместо обновления стиля для баннера через JS просто сохраняйте заполнитель сверху и управляйте стилями через CSS. Я не видел значения, чтобы сделать это через JS.

Вы могли filter бы удалить ненужные элементы массива, а затем использовать простой forEach для отображения. Что-то вроде этого:

 const eventList = [{
  scheduleId: 'ed',
  live: 'true',
}, {
  scheduleId: 'hss',
  live: 'false',
}, {
  scheduleId: 'sci',
  live: 'false',
}, {
  scheduleId: 'nursing',
  live: 'true',
}];

const scheduleEl = document.querySelector("#schedule")
eventList
  .filter(event => event.live === 'true')
  .forEach(event => {
    scheduleEl.innerHTML  = `<p>- ${event.scheduleId}</p>`;
  }); 

 <p>Live event schedule:</p>
<div id="schedule">
</div>