這是網(wǎng)站上特定預(yù)訂的 div - 在此示例中，數(shù)字 7568 是旅游 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"} >
對于特定的旅游 ID，我想隱藏頁面上的另一個(gè) div，那么如果數(shù)據(jù)預(yù)訂詳細(xì)信息包含某些數(shù)字，有沒有辦法將 CSS 應(yīng)用于頁面上的另一個(gè) div？
因此，如果 data-booking-detail 包含 7568，則隱藏提供立即預(yù)訂并稍后付款的 div。
2
0
0
首先，選擇特定元素。在您的例子中，該元素的 ID 為 tourmaster- payment-template-wrapper ，并且您正在查找包含值 7568 的屬性 .data-booking-detail
這是如何隱藏第二個(gè)元素的示例：
#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 來實(shí)現(xiàn)此功能。
以下是如何使用 JavaScript 實(shí)現(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>
