1

「Spritely」という JS プラグインを使用して背景画像をアニメーション化しています。すべてが機能します (背景が動いています)。しかし、div(スプライト)をクリックしたときに関数をアクティブにすることはできません。

（script.js、jquery、spritelyが含まれています）。

HTML はたった 2 つの div (#container と #hills)

CSS

#container
{
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
background-image:url(clouds.jpg);
background-repeat:repeat-x; 
z-index:-3;
position:absolute;
}
#hills
{
width:100%;
height:250px;
background-image:url(hills.png);
background-repeat:repeat-x;
background-position:bottom;
z-index:1;
position:absolute;
bottom:0px;
}

JavaScript

$(document).ready(function() {
$(hills).click(function(){
    alert("hey");
});
});
var hills;

$(document).ready(function(){
var hills = document.getElementById('hills');
$(hills).pan({fps: 30, speed: 2, dir: 'left'});
});
4

2 に答える 2

1

hills最初に要素を追加せずに使用しようとしているようです。これを試してください：

$(document).ready(function() {
    var $hills = $('#hills');
    $hills.pan({fps: 30, speed: 2, dir: 'left'});
    $hills.click(function(){
        alert("hey");
    });
});

また、これでコードを少しクリーンアップしました。ここでは、2 つの別個の を用意する必要はありませんready()。#hillsとにかくjquery関数を使用しているので、jQueryセレクターを使用しています。また、同じ jquery オブジェクトを 2 回ラップする必要がないように、そのオブジェクトをキャッシュします。

于 2013-08-19T18:00:41.413 に答える
1

可変スコープの問題があります (私が追加したコメントを参照してください):

$(document).ready(function () {
    $(hills).click(function () {
        alert("hey");
    });
});
var hills; // Your click handler uses this variable, which is never set

$(document).ready(function () {
    //this "hills" variable, since you prefaced with "var", 
    //  is local to this anonymous function,
    //  meaning the click handler can't see it.
    var hills = document.getElementById('hills'); 
    $(hills).pan({
        fps: 30,
        speed: 2,
        dir: 'left'
    });
});

2 つの DOM 対応ハンドラーがあるのはなぜですか? 次のように組み合わせてみませんか。

$(document).ready(function () {
    var hills = document.getElementById('hills');
    $(hills).pan({
        fps: 30,
        speed: 2,
        dir: 'left'
    });
    $(hills).click(function () {
        alert("hey");
    });
});

もう 1 つのオプションは、varキーワードを削除して、2 番目の DOM 対応ハンドラーでグローバル変数を使用することです。

$(document).ready(function () {
    $(hills).click(function () {
        alert("hey");
    });
});
var hills;

$(document).ready(function () {
    hills = document.getElementById('hills');
    $(hills).pan({
        fps: 30,
        speed: 2,
        dir: 'left'
    });
});

または、グローバル変数を完全に削除します。これらのスニペットは 1 回しか実行されないため、DOM 要素をキャッシュしてもあまりメリットはありません。

$(document).ready(function () {
    $('#hills').click(function () {
        alert("hey");
    });
});

$(document).ready(function () {
    $('#hills').pan({
        fps: 30,
        speed: 2,
        dir: 'left'
    });
});
于 2013-08-19T18:04:10.710 に答える