0

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

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

我想要做的是创建一个函数，<h2>当 jQuery bxslider 更改它后面的图像时，用适当的标语替换元素（即第二个产品等于项目 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 更新内容，我可以做到。

4

1 回答 1

0

我在另一个滑块上遇到了类似的问题，请参阅这个问题：在 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>

因此，编辑人员会将这些标语输入与 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 上有一个问题，说它可能不适用于“自动”。

于 2014-08-16T08:37:11.150 回答