Question

所以我使用jQuery尝试使用“radial-gradient”类在每个图像的顶部添加一个渐变div。

我将所有匹配的元素存储在一个数组中：

var $imgRadialGradient = jQuery("img.radial-gradient");

对于每个元素，我等到它加载后再计算高度：

$imgRadialGradient.each(function(){

  $this = jQuery(this);

  $this.load(function() {

    var imgRadialGradientHeight = $this.height();

然后我根据这个高度添加一个带有几个样式的div：

$this.after("<div class='radial-gradient' style='height:"+imgRadialGradientHeight+"px; margin-top:-"+imgRadialGradientHeight+"px'></div>");

  });

});

问题是在我想要的每个元素之后的最后一个元素之后，div都被添加了。

这是一个箱子：http://jsbin.com/luqiluweje/3/edit

Answer 1

替换：

$this = jQuery(this);

使用：

var $this = jQuery(this);

否则$this是一个全局变量，由函数的所有迭代共享（和更改）。当任何load()处理程序被调用时，$this始终指向最后一个图像。

＆＃13;

var $imgRadialGradient = jQuery("img.radial-gradient");

$imgRadialGradient.each(function() {

  var $this = jQuery(this);

  $this.load(function() {

    var imgRadialGradientHeight = $this.height();

    $this.after("<div class='radial-gradient' style='height:" + imgRadialGradientHeight + "px; margin-top:-" + imgRadialGradientHeight + "px'></div>");

  });

});

＆＃13;

body {
  width: 400px;
}
div.radial-gradient {
  background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  width: 100%;
  position: relative;
  z-index: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://static.jsbin.com/images/dave.min.svg" class="radial-gradient">
<img src="http://static.jsbin.com/images/dave.min.svg" class="radial-gradient">
<img src="http://static.jsbin.com/images/dave.min.svg" class="radial-gradient">

＆＃13;

当尝试在每个图像元素之后添加div时，所有div都会添加到单个元素之后

1 个答案: