這是網(wǎng)站上特定預(yù)訂的 div - 在此範(fàn)例中，數(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"} >
對(duì)於特定的旅遊 ID，我想隱藏頁(yè)面上的另一個(gè) div，那麼如果資料預(yù)訂詳細(xì)資料包含某些數(shù)字，有沒(méi)有辦法將 CSS 套用到頁(yè)面上的另一個(gè) div？
因此，如果 data-booking-detail 包含 7568，則隱藏提供立即預(yù)訂並稍後付款的 div。
2
0
0
首先，選擇特定元素。在您的範(fàn)例中，該元素的ID 為tourmaster- payment-template-wrapper ，並且您正在尋找包含值7568 的屬性.data-booking-detail
這是如何隱藏第二個(gè)元素的範(fàn)例：
#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ù)字來(lái)隱藏 div。然而，CSS 本身無(wú)法直接操作屬性或其值。您需要使用 JavaScript 或 jQuery 來(lái)實(shí)作此功能。
以下是如何使用 JavaScript 實(shí)作此目的的範(fà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>
