Question

我找到了这个解决方案并且它可以正常工作，但这需要TweenLite.js。
有没有办法在没有TweenLite的情况下工作？并压缩代码？

＆＃13;

$.fn.loadImg = function() {
    return this.each(function() {
      var t = $(this),
        e = t.data(),
        i = e.img;
      if (e.insert) {} else {
        var r = {
          backgroundImage: "url(" + i + ")"
        };
        TweenLite.set(t, r);
      }
    }), this;
}, (jQuery),
$(function() {
    $("[data-img]").loadImg();
});

＆＃13;

有人可以告诉我以下代码有什么问题，图片不显示！

＆＃13;

$('figure data-img').each(function() {
  this.src = $(this).data('src');
});

＆＃13;

<figure data-img="photo1.jpg">  </figure>
<figure data-img="photo2.jpg">  </figure>
<figure data-img="photo3.jpg">  </figure>

＆＃13;

Answer 1

我不认为figure标签有src属性，所以：

$("figure").each(function()
{

  $("img",this).attr("src",$(this).data("img"));
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure data-img="photo1.jpg"><img/>  </figure>
<figure data-img="photo2.jpg"><img/>  </figure>
<figure data-img="photo3.jpg"><img/>  </figure>

Answer 2

使用attr函数更改div标签的属性：

$('figure data-img').each(function() {
  this.src = $(this).data('src');
});

应该是

$('figure data-img').each(function() {
 $(this).attr('data-img', 'src');
});

Answer 3

您的代码存在两个问题。至关重要的是，figure element没有src属性。您的figure元素必须包含img元素才能显示图像。其次，您的CSS选择器应该只是'figure'，您不应该包含数据属性。

＆＃13;

$('figure').each(function() {
    $(this).html('<img src="' + $(this).data('src') + '">');
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<figure data-img="photo1.jpg"></figure>
<figure data-img="photo2.jpg"></figure>
<figure data-img="photo3.jpg"></figure>

＆＃13;

如果您不想将其他figure元素应用于此类，请将类添加到相应的元素中以引用它们。

Answer 4

$('figure').each(function() {
 $(this).attr('data-img','test.jpg');   
}

用data-img替换img src

4 个答案: