1

鉴于该 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/

4

3 回答 3

5

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

$this = $(this);

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

使其成为局部变量：

var $this = $(this);
于 2013-03-07T10:56:36.513 回答
1

在您的 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);
于 2013-03-07T10:56:39.233 回答
0

我认为应该这样做：小提琴

    $(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'
            });
        });
    });
于 2013-03-07T11:04:54.843 回答