Question

尝试构建循环浏览照片的良好效果，但仅在开始时使用HTML代码时才有效，而不是在后续附加。

以下是代码：

    $(document).ready(function() {
        EmbedInit();
    });

function EmbedInit()
{
    // Init will be called when this page is loaded in the client.
    Start();

    var divs = $('div[id^="content-"]').hide(),
    i = 0;
    (function cycle() {
        divs.eq(i).fadeIn(800)
                  .delay(1000)
                  .fadeOut(800, cycle);
        i = ++i % divs.length;
    })();

    return;
}

在你问这是一个解决软件的工作之前，先致电EmbedInit所以这部分我无法触及。只需添加$(document).ready(function())即可在broswer上进行测试。

现在我的start()函数是一个ajax请求，并为我的代码添加了大约5个div，如下所示：

function Start() {
    var row1 = '<div id="content-1"><div id="photo"><img width="170" src="img.jpg"></div><div class="Text">Text</div></div>';
    var row2 = '<div id="content-2"><div id="photo"><img width="170" src="img.jpg"></div><div class="Text">Text</div></div>';
    var row3 = '<div id="content-3"><div id="photo"><img width="170" src="img.jpg"></div><div class="Text">Text</div></div>';
    $('#main').append(row1);
    $('#main').append(row2);
    $('#main').append(row3);
};

Div Main就在那里，我可以看到页面上的内容，但循环通过div是不行的。我想这与动态添加div有关，因为变量divs的长度始终为0。

处理此问题的最佳方法是什么？

1 个答案:

答案 0 :(得分：1)

Answer 1

该功能为Start，大写S不低于s。

function EmbedInit()
{
    // Here is the trouble maker
    Start();

    var divs = $('div[id^="content-"]').hide(),
    i = 0;
    function cycle() {
        divs.eq(i).fadeIn(800)
                  .delay(1000)
                  .fadeOut(800, cycle);
        i = (i + 1) % divs.length; // this is safer than ++i
    }
    cycle(); // call cycle normally (no need for Immediately Invoked Function Call)

    // return here has no meaning
}

工作代码段

$(document).ready(function() {
  EmbedInit();
});

function Start() {
  var row1 = '<div id="content-1"><div id="photo"><img width="170" src="http://placehold.it/200x200"></div><div class="Text">Text</div></div>';
  var row2 = '<div id="content-2"><div id="photo"><img width="170" src="http://placehold.it/201x201"></div><div class="Text">Text</div></div>';
  var row3 = '<div id="content-3"><div id="photo"><img width="170" src="http://placehold.it/202x202"></div><div class="Text">Text</div></div>';
  $('#main').append(row1);
  $('#main').append(row2);
  $('#main').append(row3);
}

function EmbedInit() {
  // Here is the trouble maker
  Start();

  var divs = $('div[id^="content-"]').hide(),
    i = 0;

  function cycle() {
    divs.eq(i).fadeIn(800)
      .delay(1000)
      .fadeOut(800, cycle);
    i = (i + 1) % divs.length; // this is safer than ++i
  }
  cycle(); // call cycle normally (no need for Immediately Invoked Function Call)

  // return here has no meaning
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'></div>

jQuery循环通过附加的div

1 个答案: