WordPress 网站 - 在满足某些条件时应用 CSS-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

WordPress 网站 - 在满足某些条件时应用 CSS

P粉407936281 2023-09-14 14:23:49

[CSS3讨论组]

995

这是网站上特定预订的 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粉407936281

全部回复(2)

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

首先，选择特定元素。在您的例子中，该元素的 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粉7175959852023-09-15 10:00:00 1楼

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

添加回复

专题推荐

更多>

热门话题

热门教程

更多>