Question

更新 Flexslider有一堆回调空间可供使用，这使得这成为可能。

after: function(){},            //Callback: function(slider) - Fires after each slider animation completes

谢谢大家

LIVE CODE ：
我上传了实时代码进行调试;制作一个jsfiddles会相当困难。

问题：函数fetchTitle（）抓取上一个图片标题而不是最新图片？

说明：我有一个函数f fetchTitles()，它从flexslider的活动幻灯片中获取标题标记，并将其放入变量targetTitle。然后使用h1.head_line

替换targetTitle

脚本：（从完整脚本配对请查看完整的实时代码）

 function fetchTitles() {
       var targetTitle = $('.flex-active-slide').find('img').attr('title');

        $('.head_line').text(targetTitle);

    }

HTML

  <li class="flex-active-slide">
    <article class="active_work" title="Facebook + Like Pillow">
      <figure> <img title="Facebook + Like Pillow" src="asset/img/1600/slide1_1600.jpg" />
        <figcaption class="sliderCaptions">
          <h1>
            <div class="animate_text"></div>
            <a href="https://plus.google.com/104865624796200130935/" ><span>Author:</span> Matthew Harwood</a></h1>
        </figcaption>
      </figure>
      <section class="article_post"></section>
    </article>
  </li>

添加信息：

如果您点击链接两次，您会看到标题会自行更新。
即使有.flex-active-slide准备就绪，文档准备好的提取标题仍然无法识别。
脚本位于script2.js

Answer 1

改为使用$.prop：

var targetTitle = $('.flex-active-slide').find('img').prop('title');

在特定情况下，属性和属性之间的差异非常重要。 在jQuery 1.6 之前，.attr()方法在检索某些属性时有时会考虑属性值，这可能会导致行为不一致。 从jQuery 1.6 开始，.prop()方法提供了一种显式检索属性值的方法，而.attr()则检索属性。

Answer 2

这确实是时间问题。如果我引入setTimeout，问题就消失了

function fetchTitles() {
       setTimeout(function()
       {
            var targetTitle = $('.flex-active-slide').find('img').attr('title');

            $('.head_line').text(targetTitle);

       },200);
    }

Answer 3

看起来直到幻灯片动画完成后才更新类，但是一旦单击就会运行fetchTitles，因此带有'flex-active-slide'类的图像仍然是上一个图像。< / p>

您可能希望在回调函数中查看正在运行的fetchTitles，以便在幻灯片完成后运行。

为什么.attr（'title'）抓住前一个元素的标题

3 个答案: