Laman web WordPress - gunakan CSS apabila syarat tertentu dipenuhi

Question

Ini ialah div di tapak web untuk tempahan tertentu - dalam contoh ini, nombor 7568 ialah ID pelancongan.

<div class="tourmaster-template-wrapper" id="tourmaster-payment-template-wrapper" data-ajax-url="https://www.domainname.co.uk/wp/wp-admin/admin-ajax.php" data-booking-detail="{&quot;tour-id&quot;:&quot;7568&quot;} >

Untuk ID pelancongan tertentu, saya ingin menyembunyikan div lain pada halaman, jadi adakah cara untuk menggunakan CSS pada div lain pada halaman jika butiran tempahan data mengandungi nombor tertentu?

Jadi, jika butiran-tempahan data mengandungi 7568, sembunyikan div yang menawarkan tempahan sekarang dan bayar kemudian.

Answer 1

Pertama, pilih elemen tertentu. Dalam contoh anda, ID elemen ialah tourmaster- payment-template-wrapper ，并且您正在查找包含值 7568 的属性 data-booking-detail .

Ini adalah contoh cara menyembunyikan elemen kedua:

#tourmaster-payment-template-wrapper[data-booking-detail*="7568"] + .hide-me {
  display: none;
}

<div class="tourmaster-template-wrapper" id="tourmaster-payment-template-wrapper" data-ajax-url="https://www.domainname.co.uk/wp/wp-admin/admin-ajax.php" data-booking-detail="{&quot;tour-id&quot;:&quot;7568&quot;}"></div>

<div class="hide-me">I should be hidden</div>

Answer 2

Anda boleh menggunakan CSS untuk menyembunyikan div berdasarkan kehadiran atau ketiadaan nombor tertentu dalam atribut data-booking-detail. Walau bagaimanapun, CSS sendiri tidak boleh memanipulasi secara langsung sifat atau nilainya. Anda perlu menggunakan JavaScript atau jQuery untuk mencapai fungsi ini.

Berikut ialah contoh cara melakukan ini menggunakan JavaScript:

<div id="book-now-div">Offer: Book Now and Pay Later</div>


<script>
  // Get the data-booking-detail attribute value
  var bookingDetail = document.getElementById("tourmaster-payment-template-wrapper").getAttribute("data-booking-detail");

  // Check if the bookingDetail includes the specific tour ID
  if (bookingDetail.includes('7568')) {
    // Hide the div with id "book-now-div"
    document.getElementById("book-now-div").style.display = "none";
  }
</script>