循环通过一组鲈鱼CMS标语

Loop through an array of Perch CMS taglines

本文关键字：一组 CMS 标语 循环      更新时间：2023-09-26

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

所以我的问题有三个要素。一个JQuery bxslider，一个鲈鱼CMS标签集，我的客户端必须能够在网站发布和javascript代码块后更新。

我想要能够做的是创建一个函数，取代<h2>元素与适当的标语(即第二个产品等于项目2在鲈鱼)当jQuery bxslider改变它背后的图像。

这里是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，但没有成功。有人能提点建议吗?非常棘手的概念，我可以做到，如果我的客户不是如此依赖于更新内容与鲈鱼。

我有一个类似的问题与另一个滑块，看看这个问题:在JSSOR，如何通过Javascript访问当前标题?

在编辑器输入carousel图像的同一个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>

因此编辑器将在与幻灯片图像相同的项中输入这些标语。

正如您所写的，bxslider在每个转换结束时都有一个回调，所以这很好。请注意，滑块是通过将其分配给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"一起工作。

相关文章：