Question

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

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

我希望能够做的是创建一个函数，当jQuery bxslider更改其后面的图像时，用适当的标语替换<h2>元素（即第二个产品等于perch中的第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

我在另一个滑块上遇到了类似的问题，请看这个问题：In JSSOR, how to access the current caption via 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>

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

在你写的时候，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上存在一个问题，即它可能无法使用＆＃34; auto＆＃34;。

循环遍历一系列Perch CMS标语

1 个答案: