Question

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

Answer 1

在没有先添加元素的情况下，您似乎正在尝试使用hills，请尝试以下操作：

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

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

Answer 2

您有一个可变范围问题（请参阅我添加的评论）：

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

或者完全删除全局变量。这些片段只执行一次，因此通过缓存DOM元素获得的收益并不多：

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

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

Spritely div .click无效

2 个答案: