jQuery：通过数据属性选择某些元素失败 - 为什么？

Question

由于HTML代码：

<div id="details" data-type="motion"> 
    <p>Lorem ipsum</p> 
</div> 
<img src="http://placehold.it/50x50" data-type="motion" /> 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidun...</p> 

为什么不工作下面的脚本的选择是否正确？

$(document).ready(function() { 

    $('[data-type="motion"]').each(function() { 

     $this = $(this); 

     $(window).bind('scroll', function() { 

      var yOffset = (window.pageYOffset/$this.data('speed')) + 'px'; 

      $this.css({'border': '1px solid red'}); 
     }); 

    }); 

}); 

使用'[data-type="motion"]'，只有图像被选中。 'div[data-type="motion"]'当然只选用那个数据属性的div。 '*[data-type="motion"]'也只匹配图像& 'img[data-type="motion"], div[data-type="motion"]'似乎有点多余，也不工作。

下面是一个小提琴证明行为：http://jsfiddle.net/Y7QXn/

Answer 1

的问题不是选择，它的局部变量不是本地：

$this = $(this); 

这将创建一个全局变量，所以每个元素的事件处理器会影响最后一个元素。

使它成为一个局部变量：

var $this = $(this); 

Answer 2

在HTML：

<div id="details" data-type="motion"> 
    <p>Lorem ipsum</p> 
</div> 
<img src="http://placehold.it/50x50" data-type="motion" /> 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidun...</p> 

的$this.data('speed')失败，因为不存在与data-speed=""没有元素。

，你也需要改变的变量这样的范围：

var $this = $(this); 

Answer 3

我认为它应该做的事是这样的：fiddle

$(window).bind('scroll', function() { 
     $('[data-type="motion"]').each(function() { 
      $this = $(this); 
      var yOffset = (window.pageYOffset/$this.data('speed')) + 'px'; 
      $this.css({ 
       'border': '1px solid red' 
      }); 
     }); 
    });