jquery WordPress站点-当满足某些条件时应用CSS

jckbn6z7  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(138)

这是网站上特定预订的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,如果data-booking-detail包含某些数字,是否有方法将CSS应用到页面上的另一个div?
因此,如果data-booking-detail包含7568,则隐藏提供“现在预订,以后付款”的div。

noj0wjuj

noj0wjuj1#

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

yhuiod9q2#

首先,选择特定元素。在本例中,该元素的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>

相关问题