基于WordPress生成的Div数据属性创建唯一日期按钮的实现问题

嘿，这个需求其实两种思路都能搞定，我给你拆解一下，看哪种更适合你的场景：

方案一：PHP后端处理（更推荐） #

既然你的日期数据本来就是从PHP的$rengdata对象来的，那直接在后端收集唯一日期并生成按钮会更高效，还能避免前端JS加载的延迟问题。

具体做法是：在循环生成那些带data-renginiolaikas属性的col-sm-3容器时，先把日期值存入一个数组（利用数组键自动去重的特性），之后再循环这个数组生成按钮。

示例代码：

<?php
// 初始化一个空数组来存储唯一日期（用键去重）
$unique_dates = [];

// 假设你是通过循环生成下方的col-sm-3容器，这里模拟循环逻辑
foreach ($your_renginiai_items as $item) {
    $date = $item->rengdata->format('Y-m');
    // 用日期作为数组键，自动去重
    $unique_dates[$date] = $date;
    
    // 输出你的col-sm-3容器
    echo '<div class="col-sm-3" data-renginiolaikas="' . $date . '"></div>';
}
?>

<!-- 生成按钮容器 -->
<div class="laikotarpis">
    <?php foreach ($unique_dates as $date): ?>
        <button value="<?php echo $date; ?>" class="laiko-btn">
            <?php echo str_replace('-', ' ', $date); ?>
        </button>
    <?php endforeach; ?>
</div>

方案二：前端jQuery处理 #

如果因为某些原因必须在前端处理（比如内容是AJAX动态加载的），可以用jQuery来收集、去重日期，再生成按钮。

核心思路是：收集所有data-renginiolaikas的值，用Set快速去重，然后遍历生成按钮插入到目标容器。

示例代码：

jQuery(document).ready(function($) {
    // 收集所有日期并去重
    const uniqueDates = new Set();
    $('.col-sm-3[data-renginiolaikas]').each(function() {
        uniqueDates.add($(this).data('renginiolaikas'));
    });

    // 生成按钮并插入到容器中
    const $buttonContainer = $('.laikotarpis');
    [...uniqueDates].forEach(date => {
        // 把日期格式从YYYY-MM转成YYYY MM
        const displayText = date.replace('-', ' ');
        $buttonContainer.append(`<button value="${date}" class="laiko-btn">${displayText}</button>`);
    });
});

补充说明 #

• 后端方案的优势：服务器端直接生成，页面加载时按钮就存在，SEO更友好，无需依赖JS。
• 前端方案的优势：适合动态加载的内容，比如用户触发AJAX后才出现的日期容器，这时候后端没法提前预知数据。

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