点击菜单选项时动态获取data-value并更新Alpine.js的total变量

问题背景 #

存在带有不同data-value属性的HTML列表项，需要实现：点击选项时动态获取对应data-value值，更新Alpine.js中的total变量，同时确保AJAX请求能正确返回对应分类的总帖子数。

示例HTML结构：

<li :class="category == 1095 ? 'child' : ''" class="child">
    <a class="child post_no active" data-value="3" @click="filterPosts(1095)">option 1 (3)</a>
</li>

已尝试方案 #

曾用两段jQuery代码尝试获取激活项的data-value，但点击新选项时数据无法自动刷新：

1. 遍历列表项查找激活状态：

jQuery("li.a").each(function () {
  if (jQuery(this).hasClass("active")) {
    console.log($(this).data("value"));
  }
});

2. 通过父容器定位激活项：

var itemType = jQuery("ul.filter-list").find("li.active").data("itemtype");
alert(itemType);

核心需求 #

点击选项时触发data-value获取逻辑，更新Alpine.js的total变量；同时AJAX请求需返回对应分类的总帖子数，确保数据准确性。

Alpine.js核心代码片段：

Alpine.data("filterPosts", (adminURL) => ({
    posts: "",
    limit: 6,
    category: 0,
    post_type_js: post_id,
    showDefault: true,
    showFiltered: false,
    offset: 0,
    total: 0, // 需要动态修改的变量
    
    filterPosts(id) {
        this.showDefault = false;
        this.showFiltered = true;
        this.category = id;
        this.offset = 0;
        this.total = 0; // 需替换为选中项的data-value
        this.fetchPosts();
    },
    
    loadMore() {
        this.loadingMore = true;
        this.total = 0; // 同样需动态修改
        this.offset += 6;
        this.showFiltered = true;
        this.fetchPosts(true);
    }, 
    // 省略fetchPosts方法
}));

PHP渲染的选项HTML结构：

<li :class="category == <?php echo $category->term_id; ?> ? 'child' : ''">
    <a class="child post_no" data-value="<?php echo $total_posts_child ?>" @click="filterPosts(<?= $category->term_id; ?>)">
        <?= esc_html( $category->name ); ?> (<?= $total_posts_child ?>)
    </a>
</li> 

解决方案 #

方案1：点击时直接传递PHP变量到Alpine方法 #

无需额外jQuery，直接修改点击事件，把$total_posts_child作为参数传给filterPosts：

1. 修改HTML的a标签：

<a class="child post_no" data-value="<?php echo $total_posts_child ?>" @click="filterPosts(<?= $category->term_id; ?>, <?= $total_posts_child ?>)">
    <?= esc_html( $category->name ); ?> (<?= $total_posts_child ?>)
</a>

2. 更新Alpine.js的filterPosts方法：

filterPosts(id, total) {
    // 同步激活状态（可选）
    document.querySelectorAll('.post_no').forEach(el => el.classList.remove('active'));
    event.currentTarget.classList.add('active');

    // 原有逻辑+更新total
    this.showDefault = false;
    this.showFiltered = true;
    this.category = id;
    this.offset = 0;
    this.total = total;
    this.fetchPosts();
},

方案2：通过事件对象获取data-value（无需修改PHP参数） #

如果不想调整PHP渲染的参数，可通过事件对象直接获取当前点击元素的data-value：

1. 修改a标签的点击事件：

<a class="child post_no" data-value="<?php echo $total_posts_child ?>" @click="filterPosts($event, <?= $category->term_id; ?>)">
    <?= esc_html( $category->name ); ?> (<?= $total_posts_child ?>)
</a>

2. 更新Alpine.js方法：

filterPosts(event, id) {
    // 同步激活状态（可选）
    document.querySelectorAll('.post_no').forEach(el => el.classList.remove('active'));
    event.currentTarget.classList.add('active');

    // 从事件目标获取data-value
    const total = parseInt(event.currentTarget.dataset.value);
    
    // 原有逻辑+更新total
    this.showDefault = false;
    this.showFiltered = true;
    this.category = id;
    this.offset = 0;
    this.total = total;
    this.fetchPosts();
},

方案3：AJAX返回总帖数确保数据准确性 #

为避免前端data-value与实际数据库数据不一致，可在AJAX响应中返回分类总帖子数，同步更新Alpine的total：

1. 修改PHP的AJAX函数：

<?php 
add_action('wp_ajax_filterPosts', 'filterPosts');
add_action('wp_ajax_nopriv_filterPosts', 'filterPosts');

function filterPosts()
{
    $response = [
        'posts' => "",
        'total' => 0, // 新增总帖数字段
    ];
    
    $filter_args = array(
        'post_status' => 'publish',
    );
    
    if ($_POST['limit']) {
        $filter_args['posts_per_page'] = max(0, (int) $_POST['limit']);
    }
    
    if (isset($_POST['offset'])) {                      
        $filter_args['offset'] = max(0, (int)$_POST['offset']);
    }

    if ($_POST['post_type_js']) {
        $filter_args['post_type'] = $_POST['post_type_js'];
    }

    if ($_POST['category']) {
        $filter_args['cat'] = $_POST['category'];
    }

    $filter_query = new WP_Query($filter_args);
    $response['total'] = $filter_query->found_posts; // 获取分类总帖子数

    if ($filter_query->have_posts()) :
        while ($filter_query->have_posts()) : $filter_query->the_post();
            $response['posts'] .= load_template_part('/template-parts/posts-filter/single-post');
        endwhile;
        wp_reset_postdata();
    endif;

    echo json_encode($response);
    die();
}
?>

2. 更新Alpine.js的fetchPosts方法：

async fetchPosts(isLoadMore = false) {
    const response = await fetch(adminURL, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-WP-Nonce': wpApiSettings.nonce
        },
        body: new URLSearchParams({
            action: 'filterPosts',
            category: this.category,
            limit: this.limit,
            offset: this.offset,
            post_type_js: this.post_type_js
        })
    });
    const data = await response.json();
    
    if (isLoadMore) {
        this.posts += data.posts;
    } else {
        this.posts = data.posts;
    }
    // 用AJAX返回的总数更新total
    this.total = data.total;
}

总结 #

• 优先选择方案1，直接传递PHP变量，实现成本最低且实时性强；
• 若需确保数据绝对准确，搭配方案3，用AJAX返回的数据库实际数据更新total；
• 无需额外jQuery遍历，利用Alpine的事件处理即可完成需求，代码更简洁高效。

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