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="{"tour-id":"7568"} >
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.
首先,選擇特定元素。在您的例子中,該元素的 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="{"tour-id":"7568"}"></div> <div class="hide-me">I should be hidden</div>
您可以使用 CSS 根據(jù) data-booking-detail 屬性中是否存在特定數(shù)字來隱藏 div。然而,CSS 本身無法直接操作屬性或其值。您需要使用 JavaScript 或 jQuery 來實現(xiàn)此功能。
以下是如何使用 JavaScript 實現(xiàn)此目的的示例:
<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>