如何在前端隐藏未赋值的ACF URL字段按钮？

PHP 后端判断方案（推荐） #

直接在输出按钮前判断ACF字段是否有值，空值时不会渲染按钮代码，比前端隐藏更高效：

<?php 
// 获取ACF字段的值，get_field返回字段内容而非直接输出
$book_link = get_field('book_now_link');
// 判断字段是否存在且不为空
if( $book_link ) { ?>
    <div class="booknowbtn">
        <a href="<?php echo esc_url($book_link); ?>" target="_blank">Book Now</a>
    </div>
<?php } ?>

说明：esc_url()是WordPress安全函数，用来过滤URL避免XSS风险，建议加上。

前端JS修复方案 #

如果必须用JS处理，先修正原代码的语法错误（重复的ready函数、多余的*符号），调整后的代码：

jQuery(document).ready(function() {
    var button = jQuery('.booknowbtn');
    var link = button.find('a').attr('href');
    // 检查href是否为空或不存在
    if(!link || link.trim() === ''){
        button.hide();
    }
});

说明：trim()用来去除URL前后的空白字符，避免字段里只有空格时误判。

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