光滑的滑块：当前 div 的下一个/上一个元素标题

Question

我有以下 HTML（+ ACF 字段）用于 Wordpress 中的平滑滑块：

<?php if (have_rows('videofeed2','option')): ?>
<div class="slider-popular">
            <?php while (have_rows('videofeed2','option')) : the_row(); ?>
                <div class="slider-go-wrap">
                    <div class="pop-title desktop-title">
                        <div class="video-title-wrap">
                            <h2><?php the_sub_field('video_title','option'); ?></h2>
                            <div class="pop-dura"><?php the_sub_field('date','option'); ?></div>
                        </div>
                    </div>
                    <div class="the-video-area">
                        <div class="js-lazyYT youtube" data-youtube-id="<?php the_sub_field('youtube_id','option'); ?>" data-width="300" data-height="200"></div>
                    </div>
                    <div class="pop-title mobile-pop-title">
                        <h2><?php the_sub_field('video_title','option'); ?></h2>
                        <div class="pop-dura"><?php the_sub_field('date','option'); ?></div>
                    </div>
                    <div class="video-controls">
                                <div class="prev-title-popular">
                                    <span class="video-nav-title">Previous video</span>
                                    <span class="lightspan controltitles prev-videotitle">Making a powerful difference</span> <!-- previous video ACF field "title" here -->
                                    <span class="lightspan durations prev-dura">(3:44)</span> <!-- prev video ACF field "dura" here -->
                                </div>
                                <div class="next-title-popular">
                                    <span class="video-nav-title">Next video</span>
                                    <span class="lightspan controltitles next-videotitle">Making a powerful difference</span><!-- next video title here -->
                                    <span class="lightspan durations next-dura">(3:44)</span> <!-- next video duration here -->
                                </div>
                    </div>
                </div>
            <?php endwhile;?>
</div>     
<?php endif; ?>

视频标题和时长使用 ACF 字段（选项页面）作为内容：

<?php the_sub_field('video_title','option'); ?>
and
<?php the_sub_field('dura','option'); ?>

我想从上一个和下一个字段中获取 ACF 数据到当前幻灯片中的相应字段。我还没有在网上找到任何好的解决方案，可以用一些 jQuery 来完成吗？

Answer 1

有两种方法可以实现这一目标。使用 jQuery / Slick API（客户端方式）或使用 PHP / ACF 方法（服务器方式）。

1.客户端方式

您可以在特定的 slick 事件中从上一张/下一张幻灯片 DOM 中检索数据。

例如：

$('.slider-popular').on('init beforeChange', function(event, slick, currentSlide, nextSlide){
  // find and add prev / next data (using jQuery $html() or $.text()
});
// or on document ready
$('.slider-go-wrap').each(function() {
   // find and add prev / next data (using jQuery $html() or $.text()
});

2。服务器方式

您必须使用基本的 PHP foreach 循环才能使用索引并通过索引检索上一个/下一个数据。

$rows = get_field('videofeed2');
if($rows)
{

    foreach($rows as $index => $row)
    {
        // from there, you can get prev / next data using loop index ($rows[$index-1] / $rows[$index+1]
    }

}

希望这会有所帮助。

正如评论中所说，我认为执行此操作的服务器方法可能是最干净且可能最简单的方法（即使我是前端人员）。