WordPress-Website – CSS anwenden, wenn bestimmte Bedingungen erfüllt sind

Question

Dies ist die Div auf der Website für eine bestimmte Buchung – in diesem Beispiel ist die Nummer 7568 die Tour-ID.

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

Für eine bestimmte Tour-ID möchte ich ein anderes Div auf der Seite ausblenden. Gibt es also eine Möglichkeit, CSS auf ein anderes Div auf der Seite anzuwenden, wenn die Datenbuchungsdetails bestimmte Zahlen enthalten?

Wenn also „data-booking-detail“ 7568 enthält, blenden Sie das Div aus, das „Jetzt buchen und später bezahlen“ anbietet.

Answer 1

首先，选择特定元素。在您的例子中，该元素的 ID 为 tourmaster- payment-template-wrapper ，并且您正在查找包含值 7568 的属性 data-booking-detail .

这是如何隐藏第二个元素的示例：

#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

您可以使用 CSS 根据 data-booking-detail 属性中是否存在特定数字来隐藏 div。然而，CSS 本身无法直接操作属性或其值。您需要使用 JavaScript 或 jQuery 来实现此功能。

以下是如何使用 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>