具有ACF Flexible字段和Fullpage.js的PHP计数器 [英] PHP counter with ACF Flexible fields and Fullpage.js

问题描述

我希望有人能帮助我...

我正在一个Wordpress网站中使用Alvaro Trigo的Fullpage.js和Elliot Condon的ACF Flexible字段

对于每个灵活字段条目，我在整页中声明一个新的部分/页面。客户希望在页面底部固定一个计数器，该计数器的读数为1 / 10、2 / 10、3 / 10等。

我能够计数字段总数，使用

 <？php echo count（get_field（'content'））; ？> 
  

但是，我不确定每次幻灯片更改时如何更新每个数字。我可以使用PHP还是需要JS解决方案？

这是正在进行的工作。

在此先感谢您的帮助—非常感谢！请让我知道是否需要更多信息。

解决方案

您应该为此使用Javascript。

使用fullpage.js提供的回调，例如 afterLoad 根据您可以从 afterLoad 函数参数中提取的节索引更新数字。 / p>

类似这样的东西：

  $（'＃fullpage'）。整页（{
 afterLoad：function（anchorLink，index）{
 $ {'＃counter'）。find（'span'）。html（index + 1）; 
} 
}）; 
  

具有这样的计数器元素：

 < div id = counter>< span> 1< span> / 16< / div> 
  

I'm hoping someone can help me...

I am using Alvaro Trigo's Fullpage.js and Elliot Condon's ACF Flexible field within a Wordpress site I'm developing.

For each flexible field entry I declare a new section / page within Fullpage. The client would like a counter fixed to the bottom of the page, which reads 1/10, 2/10, 3/10 etc.

I am able to count the total number of fields, using

<?php echo count( get_field('content') ); ?> 

However, I am unsure how to update each number every time the slide changes. Can I do this with PHP or is a JS solution needed?

Here is the work in progress.

Thank you in advance — Any help will be much appreciated! Please let me know if you need any more information.

解决方案

You should go for Javascript for that.

Use the callbacks fullpage.js provides such as afterLoad to update the number based on the section index which you can extract from the afterLoad function params.

Something like this:

 $('#fullpage').fullpage({
    afterLoad: function(anchorLink, index){
       $('#counter').find('span').html(index + 1);
    }
});

Having a counter element like this:

<div id="counter"><span>1<span>/16</div>

这篇关于具有ACF Flexible字段和Fullpage.js的PHP计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！