Site Web WordPress – appliquez CSS lorsque certaines conditions sont remplies

Question

Il s'agit du div sur le site Web pour une réservation spécifique - dans cet exemple, le numéro 7568 est l'identifiant de la visite.

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

Pour un identifiant de tournée spécifique, je souhaite masquer un autre div sur la page. Existe-t-il donc un moyen d'appliquer CSS à un autre div sur la page si les détails de la réservation de données contiennent certains chiffres ?

Donc, si data-booking-detail contient 7568, masquez le div qui propose de réserver maintenant et de payer plus tard.

Answer 1

Tout d’abord, sélectionnez un élément spécifique. Dans votre exemple, l'ID de l'élément est tourmaster- payment-template-wrapper ，并且您正在查找包含值 7568 的属性 data-booking-detail .

Voici un exemple de la façon de masquer le deuxième élément :

#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

Vous pouvez utiliser CSS pour masquer un div en fonction de la présence ou de l'absence d'un numéro spécifique dans l'attribut data-booking-detail. Cependant, CSS lui-même ne peut pas manipuler directement les propriétés ou leurs valeurs. Vous devez utiliser JavaScript ou jQuery pour obtenir cette fonctionnalité.

Voici un exemple de la façon de procéder en utilisant 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>