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

WordPress site - applying CSS when certain criteria are met

提问人:Deb 提问时间:6/8/2023 更新时间:6/8/2023 访问量:33

问:

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

jquery css ajax

评论

0赞 freedomn-m 6/8/2023
对于仅 css 的解决方案,这取决于测试 div 和要隐藏的 div 在 HTML 中的位置。例如,如果它们彼此相邻,或者要隐藏的 div 是 test-div 的子项,则直截了当。如果它们可以在文档中的任何位置,那么您将需要一些 javascript。

答:

-1赞 Bibisha Jacob 6/8/2023 #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赞 freedomn-m 6/8/2023
您可以使用 CSS 根据 data-booking-detail 属性中是否存在特定数字来隐藏 div。- OP 询问如何根据 div 中的值隐藏不同的 div 和 data-booking-detail。他们没有(或似乎没有)想要操纵属性/值(除非你认为样式(即 css)是一个“属性”)。
1赞 NotTheDr01ds 6/11/2023
你本月的所有五个答案似乎都可能全部或部分是由人工智能(例如 ChatGPT)编写的。请注意,此处禁止发布 AI 生成的内容。如果您使用 AI 工具来帮助回答任何答案,我鼓励您删除它。
1赞 NotTheDr01ds 6/11/2023
读者应该仔细和批判性地审查这个答案,因为人工智能生成的信息通常包含根本性的错误和错误信息。如果您发现质量问题和/或有理由相信此答案是由 AI 生成的,请留下相应的反馈。审核团队可以使用您的帮助来识别质量问题。
0赞 Reza Saadati 6/8/2023 #2

首先,选择特定元素。在您的例子中,该元素具有 ID,并且您正在寻找包含值 的属性。tourmaster-payment-template-wrapperdata-booking-detail7568

下面是如何隐藏第二个元素的示例:

#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>