基金详情状态控制异常：#btn-apply在Open状态下仍被隐藏

问题说明 #

需求：当#fund-details中的状态为“Closed”时，隐藏“Apply for this Fund”按钮（#btn-apply）。但当前代码存在问题：即使状态显示为“Open”，按钮仍会被隐藏。

核心原因 #

原代码中使用if($("#fund-details .listing_detail.col-md-4.status:contains('Closed')"))进行判断，jQuery选择器始终返回一个对象，无论是否匹配到元素，这个对象在布尔判断中都会被视为true，导致$("#btn-apply").hide()永远被执行。

修复方案 #

方案1：检查选择器匹配结果的长度 #

通过判断匹配到的元素数量是否大于0，确认状态是否为Closed：

(function($){
    $(document).ready(function(){
        // 若状态是异步加载，可保留setTimeout或改用事件监听
        if($("#fund-details .listing_detail.col-md-4.status:contains('Closed')").length > 0) {
            $("#btn-apply").hide();
        } else {
            $("#btn-apply").show(); // 确保状态为Open时按钮显示
        }
    });
})(jQuery);

方案2：直接获取状态文本进行精确判断 #

避免:contains可能的误匹配（比如文本包含"Closed"片段的情况），直接提取状态文本并判断：

(function($){
    $(document).ready(function(){
        const statusText = $("#fund-details .listing_detail.col-md-4.status")
            .text()
            .trim()
            .replace(/^Status:\s*/, ''); // 去除"Status:"前缀
        
        if(statusText === 'Closed') {
            $("#btn-apply").hide();
        } else {
            $("#btn-apply").show();
        }
    });
})(jQuery);

配套HTML调整 #

原HTML中#btn-apply硬编码了style="display: none;"，需要移除，让JS控制显示/隐藏：

<div id="btn-apply" class="elementor-element elementor-element-3ebb592 elementor-align-center elementor-widget__width-inherit elementor-widget elementor-widget-button" data-id="3ebb592" data-element_type="widget" data-widget_type="button.default">
    <div class="elementor-widget-container">
      <div class="elementor-button-wrapper">
          <a class="elementor-button elementor-button-link elementor-size-md elementor-animation-push" href="http://applications.silcgroup.com/the-silc-group/mosaic-capital-fund.php" o-123link="">
                <span class="elementor-button-content-wrapper">
                  <span class="elementor-button-text">Apply for this Fund</span>
                </span>
          </a>
      </div>
    </div>
</div>

额外优化建议 #

• 如果状态通过异步接口加载，建议移除setTimeout，改用接口回调或MutationObserver监听DOM变化来触发判断逻辑，避免依赖固定延迟导致判断时机不准。
• 使用精确文本匹配替代:contains，可避免类似"Closed for maintenance"这类包含"Closed"但实际状态不匹配的场景误判。

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