如何使用 JavaScript onclick 函数实现 ACF 的交互式日历效果？

用 JavaScript onclick 函数实现 ACF 的日历效果

前言

在 WordPress 中使用高级自定义字段（ACF）创建交互式日历是一个常见需求。本文将深入探讨如何使用 JavaScript onclick 函数为 ACF 的日历功能增添动态性，允许你根据所选日期显示特定的内容。

了解你的 ACF 字段

在开始之前，确保你有以下 ACF 字段：

• 重复器字段： 名为“programma”
• 子字段 1： 用于日期（名为“programma_dag”）
• 子字段 2： 用于文本内容（名为“programma_tekst”）

创建 HTML 结构

第一步是构建 HTML 结构以容纳日历：

<div class="calendar">
    <div class="calendar-dates">
        <!-- 这里显示日期链接 -->
    </div>
    <div class="calendar-content"></div>
</div>

编写 JavaScript 函数

创建 onclick 函数以处理日期点击事件：

function displayProgram(date) {
    // 使用 AJAX 获取关联内容
    $.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>',
        data: {
            action: 'get_program_content',
            date: date
        },
        success: function(response) {
            // 在内容容器中显示响应
            $('.calendar-content').html(response);
        }
    });
}

注册 AJAX 动作

在 WordPress 中注册 AJAX 动作以处理 AJAX 请求：

add_action('wp_ajax_get_program_content', 'get_program_content');
add_action('wp_ajax_nopriv_get_program_content', 'get_program_content');

function get_program_content() {
    // 获取日期并返回关联内容
    $date = sanitize_text_field($_POST['date']);
    $program_content = get_field('programma_tekst', false, false, $date);
    echo $program_content;
    die();
}

绑定事件监听器

将事件监听器绑定到日期链接：

$('.calendar-date').on('click', function(e) {
    e.preventDefault();
    var date = $(this).data('date');
    displayProgram(date);
});

结论

通过遵循这些步骤，你可以为你的 ACF 日历添加一个动态的日期选择功能。现在，当用户点击一个日期时，将使用 AJAX 获取关联内容并将其显示在内容容器中。

常见问题解答

1. 我找不到 'programma' 字段。

   • 检查你是否创建了一个名为“programma”的重复器字段。

2. 我的日期链接没有反应。

   • 确保你已将事件监听器正确绑定到日期链接。

3. 我收到了一个 AJAX 错误。

   • 检查你的 AJAX 请求路径和数据是否正确。

4. 如何更改内容容器的样式？

   • 使用 CSS 对“calendar-content”类进行样式调整。

5. 我可以使用多个日历吗？

   • 是的，你可以使用此代码创建多个日历，但你需要为每个日历使用不同的“programma”字段。