循环遍历Perch CMS标记线数组

Question

这是一个相当复杂的要求。

因此，我的问题有三个要素。一个JQuery bxslider滑块，一个Perch标签集，我的客户端必须能够在网站发布后进行更新，以及一个javascript代码块。

我想要做的是创建一个函数，当<h2> be滑块改变它后面的图像时，用适当的标签行替换jQuery元素(即第二个产品等于它的第2项)。

所以这里有一个HTML的问题

                <div class="overlay">
                    <div class="tagbox"> 
                        <h2>We provide business and personal insurance to suit your individual needs</h2>
                        <a class="read-more">Read more</a> 
                    </div>
                </div>

以及bxSlider的标准脚本

$('.bxslider').bxSlider({
            pager: true, 
            auto: true,
            useCSS: false
            // onSlideAfter: /*NEED CHANGING FUNCTION HERE*/
        });

我需要一个jQuery脚本，它将使用我使用的标签行数组：

<?php perch_content('Taglines');?>

我试着为我的功能做这样的事情：

        $(".tagbox h2").html(/*NEED TO GET ARRAY INDEX HERE i.e. heading 2, 3, 4*/);

我尝试过使用$each()函数循环jQuery附带的函数，但没有成功。有人有什么建议吗？这是一个非常棘手的概念，如果我的客户不那么依赖于用Perch更新内容，我可以这么做。

Answer 1

我对另一个滑块也有类似的问题，参见这个问题：在JSSOR中，如何通过Javascript访问当前标题？

在编辑器输入旋转木马图像的同一个Perch模板中，您可以使用perch_item_zero_index (从0开始)或perch_item_index (从1开始)对内容(例如，ID)进行编号：

<li>
    <img src="/images/730_200/tree_root.jpg" />
   <div id="caption-slide-<perch:content id="perch_item_zero_index" type="hidden" />"><perch:content type="text" id="caption" label="Text for the tagline" required="true"  /></div>
</li>

因此，编辑器将输入这些标签线在相同的项目中，幻灯片图像在鲈鱼。

在编写时，so滑块在每个转换结束时都有一个回调，所以这很好。请注意，通过将滑块分配给var slider来初始化滑块，因此您可以在以后访问该滑块：

var slider = $('.bxslider').bxSlider({
  onSlideAfter: function(){
    // get the text and place it somewhere else
  }
});

现在你只需要知道你在哪张幻灯片上。如果您知道这一点，请参阅http://bxslider.com/options，您可以在每个转换结束时获取内容，并将其放在DOM中的其他地方：

var slider = $('.bxslider').bxSlider({
  onSlideAfter: function(){
    // which slide are we in?
    var current = slider.getCurrentSlide();
    // get the text from the caption that corresponds to the current slide 
    // and place it somewhere else in the dom
    $(".tagline h2").text($("#caption-slide-" + current).text());
  }
});

未经测试，但基本上，应该是这样的。请注意，https://github.com/stevenwanderski/bxslider-4/issues/604上有一个问题，即它可能还不能使用"auto“。