Saya tidak tahu cara menargetkan dan menampilkan tag ID HTML ketika objek JS yang cocok, yang terkandung dalam array, memiliki nilai "hidup" dari benar. Saya ingin loop JS untuk ...

1
dancingrobots 5 April 2021, 20:10

4 jawaban

Jawaban Terbaik

Jika saya mengerti dengan benar, Anda ingin semua tautan tersembunyi dan hanya menampilkan beberapa berdasarkan nilai JS? Bisakah Anda lakukan:

.link-class {
    visibility: hidden;
}
for (let event of eventList) {
    if (event.live) {
        document.getElementById(event.scheduleId).style.visibility="visible" 
    }
}
0
QuinnFreedman 5 April 2021, 17:51

Anda bisa filter keluar elemen array yang tidak diinginkan dan kemudian gunakan forEach yang sederhana untuk ditampilkan. Sesuatu seperti ini:

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>
0
Tom O. 5 April 2021, 19:04

Saya akan memperbarui tipe data untuk properti 'Live' ke boolean bukan string.

Di dunia nyata, ini akan didorong oleh data dan Anda tidak perlu membandingkan tanggal tetapi cukup periksa properti 'Live' jika itu benar atau tidak.

Jika saya mengerti dengan benar, ketika pengguna mendarat di halaman ini, Anda menghitung tanggal / waktu saat ini dan menunjukkan acara mana yang hidup. Jika ini masalahnya, Anda bisa membandingkan tanggal / waktu saat ini dan menampilkan tautan untuk yang hidup. Tidak perlu memperbarui event.live. Bahkan, Anda seharusnya tidak memperbarui data Anda melalui JS.

Selain itu, alih-alih memperbarui gaya untuk spanduk melalui JS, hanya mempertahankan placeholder di atas dan kontrol gaya melalui CSS. Saya tidak melihat nilai untuk melakukannya melalui JS.

0
Jaspero 5 April 2021, 18:31

Jika saya mengerti Anda ingin menunjukkan tautan dari acara itu berdasarkan jika acara ini hidup pada objek peristiwa, Anda dapat mencoba sesuatu yang sederhana seperti membuat kelas yang akan menunjukkan elemen seperti ini

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>
0
Carlos Gutierrez 5 April 2021, 18:22