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