WordPress站点：基于Tour ID条件应用CSS隐藏指定Div

纯CSS没办法直接解析data-booking-detail属性里的JSON格式内容，所以得用JavaScript来实现你的需求。下面是具体的实现方案：

1. 确认目标元素选择器 #

先确定那个提供“先预订后付款”功能的Div对应的选择器——比如它的类名是pay-later-section或者ID是pay-later-div，后续代码里要替换成你页面上实际的选择器。

2. 编写JavaScript逻辑 #

// 等DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', function() {
    // 获取包含booking信息的容器元素
    const paymentWrapper = document.getElementById('tourmaster-payment-template-wrapper');
    if (!paymentWrapper) return; // 如果元素不存在，直接终止执行

    try {
        // 注意：你原HTML里的data-booking-detail属性引号没闭合，要先修复这个语法错误
        const bookingDetail = JSON.parse(paymentWrapper.getAttribute('data-booking-detail'));
        
        // 判断当前Tour ID是否为7568
        if (bookingDetail['tour-id'] === '7568') {
            // 找到并隐藏“先预订后付款”的Div，替换成实际选择器
            const payLaterDiv = document.querySelector('.pay-later-container');
            if (payLaterDiv) {
                // 直接隐藏的方式
                payLaterDiv.style.display = 'none';
                // 或者用类名控制（更推荐，方便后续修改样式）：
                // payLaterDiv.classList.add('hidden');
            }
        }
    } catch (e) {
        console.error('解析booking信息失败:', e);
    }
});

补充说明 #

• 先修复你原HTML的语法错误：data-booking-detail属性的引号未闭合，正确格式应为：

  <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"}'>
  

• 如果用类名控制隐藏，建议提前在CSS中定义：

  .hidden {
      display: none !important;
  }
  

  后续用JS添加类名即可，样式管理更灵活。

内容的提问来源于stack exchange，提问作者Deb