Question

我写了一些jQuery来滑动一些文本，然后经过一段时间后再将它滑出来并滑入下一个文件。这是脚本：

var About = {
    init: function () {
        var text_spans = $('.headline-box a'),
            extracts = new Array(),
            delay = 5,
            current = 0;

        text_spans.each(function (index) {
            if ($(this).is(":visible")) {
                current = index;
            }
            extracts.push($(this));
        });

        var interval = setInterval(function () {

            target = (current < (extracts.length - 1)) ? current + 1 : 0;

            extracts[current].slideUp('slow');
            extracts[target].slideDown('slow');

            current = target;

        }, delay * 500);

    }
}

About.init();

它有效，但我在页面上有两个.headline-box个实例，每个实例都有3个链接（a）。像这样（简化）：

<div class="headline-box">
    <a href="#">Lorem Ipsum</a>
    <a href="#">Dolar Sit Amet</a>
    <a href="#">Aliquam imperdiet ornare</a>
</div>

<div class="headline-box">
    <a href="#">Lorem Ipsum</a>
    <a href="#">Dolar Sit Amet</a>
    <a href="#">Aliquam imperdiet ornare</a>
</div>

一切正常（它们全部滑入和滑出）但问题是：一个盒子将贯穿序列一次，然后停止，等待另一个盒子穿过它，然后第一个盒子将再次开始。

有没有人知道为什么以及如何解决这个问题，所以他们都同时运行？谢谢你的帮助:)）

Answer 1

您可以创建一个类About，并创建两个实例：

function Abount() {
   //define class here
}

$(function() {
    $('.headline-box').each(function(n, elem) {
        new About(elem);
    });
})

完整版：http://jsfiddle.net/vAbZ6/

Answer 2

我相信你可以在每个div.headline-box上使用jquery。

这应该做（或非常接近）。

$('div.headline-box').each(function(){
  var text_spans = $(this).children('a') ;
   extracts = new Array(),
        delay = 5,
        current = 0;

    text_spans.each(function (index) {
        if ($(this).is(":visible")) {
            current = index;
        }
        extracts.push($(this));
    });

    var interval = setInterval(function () {

        target = (current < (extracts.length - 1)) ? current + 1 : 0;

        extracts[current].slideUp('slow');
        extracts[target].slideDown('slow');

        current = target;

    }, delay * 500);

}）;

Answer 3

您的代码会从每个标题框中获取所有锚元素，然后按顺序循环显示这些元素。从您更新的答案中，我知道您希望标题框能够独立地循环显示其子元素。

我已将此jsfiddle设置为示例。

诀窍是确保您单独跟踪您正在循环的标题框。最简单的方法是为每个标题框创建一个控制器对象的实例。

在示例代码中，您只需调用

即可

var about_a = new About($("#box_a"));
var about_b = new About($("#box_b"));

需要2个jQuery实例在同一页面上同时运行

3 个答案: