Javascript 滑动条：当前div的下一个/上一个元素标题

我有以下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; ?>

有两种方法可以实现这一点。使用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。服务器方式

为了使用索引并通过索引检索prev/next数据，您必须使用基本的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]
    }

}

希望这会有所帮助

正如在评论中所说，我认为服务器方法可能是最干净、最简单的方法（即使我是前端人员）。
实际上，您不会直接从上一个和下一个字段获取
ACF数据。您只需获取上一张/下一张幻灯片的持续时间，并将其放入slick上的当前幻灯片，即更改前<代码>或更改后<代码>中。糟糕，完全可以直接在循环中获取ACF数据。您必须从具有上一个/下一个索引的行中检索ACF。如下所述：。这两种方法都可以，嗯，服务器端可能是一种更干净的方法。到目前为止，我已经做到了：$（'.slider go wrap'）。每个（function（）{currentSlide=$（'.slick current'）；nextSlide=currentSlide.next（）；prevSlide=currentSlide.prev（）；nextSlideData=nextSlide.find（'.next videotitle'）.html（）；prevSlideData=prevSlide.find（'.prev videotitle'）.html（）；}）；但它似乎不起作用。有什么提示说明原因吗？
$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]
    }

}