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"] ' 似乎有点多余，而且也不起作用。

这是一个演示该行为的 fiddle :http://jsfiddle.net/Y7QXn/

Answer 1

问题不在于选择器，而在于非本地的局部变量:

$this = $(this);

这将创建一个全局变量，因此每个元素的事件处理程序都会影响最后一个元素。

让它成为局部变量:

var $this = $(this);