搜尋

首頁  >  問答  >  主體

WordPress 網站 - 在滿足某些條件時套用 CSS

這是網站上特定預訂的 div - 在此範例中,數字 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="{&quot;tour-id&quot;:&quot;7568&quot;} >

對於特定的旅遊 ID,我想隱藏頁面上的另一個 div,那麼如果資料預訂詳細資料包含某些數字,有沒有辦法將 CSS 套用到頁面上的另一個 div?

因此,如果 data-booking-detail 包含 7568,則隱藏提供立即預訂並稍後付款的 div。

P粉407936281P粉407936281519 天前643

全部回覆(2)我來回復

  • P粉287726308

    P粉2877263082023-09-15 12:44:01

    首先,選擇特定元素。在您的範例中,該元素的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>

    回覆
    0
  • P粉717595985

    P粉7175959852023-09-15 10:00:00

    您可以使用 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>

    回覆
    0
  • 取消回覆