Spritely div .click 不起作用答案

【问题标题】：Spritely div .click not workingSpritely div .click 不起作用
【发布时间】：2013-08-19 17:58:33
【问题描述】：

我正在使用名为“Spritely”的 JS 插件来为背景图像设置动画。一切正常（背景在移动）。但是当单击 div(sprite) 时，我无法激活函数。

（我有 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'});
});

【问题讨论】：

标签： javascript jquery css sprite spritely

【解决方案1】：

看起来您正在尝试使用 hills 而不先向其中添加元素，试试这个：

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

我还用这个清理了你的代码。这里不需要两个单独的ready()s。我正在为#hills 使用jQuery 选择器，因为无论如何您都在使用jquery 函数。我还缓存了该对象，这样我们就不必将同一个 jquery 对象包装两次。

【讨论】：

【解决方案2】：

您有一个变量范围问题（请参阅我添加的 cmets）：

$(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'
    });
});

为什么有两个 DOM 就绪处理程序？为什么不这样组合它们：

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

另一种选择是让第二个 DOM 就绪处理程序通过删除 var 关键字来使用全局变量：

$(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'
    });
});

或者干脆完全删除全局变量。这些 sn-ps 只执行一次，因此缓存 DOM 元素并没有什么好处：

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

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

【讨论】：