1

我正在使用名为“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'});
});
4

2 回答 2

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

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

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

另一种选择是通过删除var关键字让第二个 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'
    });
});

或者干脆完全删除全局变量。这些片段只执行一次，因此缓存 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 回答
1

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

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

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

于 2013-08-19T18:00:41.413 回答