为什么.attr('title'）正在抓取前一个元素'的标题

Why is .attr('title') grabbing the previous element's title

本文关键字：一个 元素 标题 title attr 为什么 抓取      更新时间：2023-09-26

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

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

感谢大家

实时代码：
我上传了实时代码进行调试；因为要制作一个jsfiddles就相当困难了。

问题：函数fetchTitle（）获取上一个图像标题，而不是最新的？

解释：我有一个函数falled fetchTitles()，它从flexslider的活动幻灯片中获取标题标签，并将其放入可变的targetTitle中。然后用targetTitle 替换h1.head_line

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

 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中源的底部

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

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

改用$.prop：

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

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

在幻灯片动画完成之前，类似乎不会更新，但只要单击即可运行fetchTitles，因此具有"flex active slide"类的图像仍然是前一个图像。

您可能想研究在回调函数中运行fetchTitles，以便它在幻灯片完成后运行。

相关文章：