Question

我在Wordpress中为光滑的滑块提供以下HTML（+ ACF字段）：

<?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。客户方式

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

E.g。：

$('.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]
    }

}

希望这会有所帮助。

正如评论中所述，我认为这样做的服务器方法可能是最干净的，也许是最简单的方法（即使我是前端人员）。

光滑滑块：next / prev当前div的元素标题

1 个答案: