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"]'、冗長なようで、機能していません。

これは、その動作を示す Fiddle です: 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 に答える