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' 
      }); 
     }); 
    });