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"]'也仅匹配图片＆amp; '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'
            });
        });
    });

jQuery：对于某些元素，按数据属性选择失败 - 为什么？

3 个答案: