1

我的 jQuery 有点问题。我希望它扩展 div 元素的高度，但似乎无法舔它。我正在使用以下脚本：

<script>
$('.button').click(function(){
$('#footer_container').animate({height:'150px'}, 500);
});
</script>

其中“.button”是触发动画的超链接类：

“#footer_container”是应该从 75px 扩展到 150px 的 div。

我在用着

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

在我的医生的头上。它是错误的附件吗（我将它用于我在页面上运行的其他几个脚本）？我错过了什么？ 我已经在我的测试网站上发布了原型。它是底部蓝色条上的矩形按钮，上面写着：点击查看我们的会员资格。它应该扩展 div 以显示额外的内容，但什么也不做:-(

有人有想法么？非常感谢！！

4

2 回答 2

1

代码应该在 dom 就绪处理程序中，因为当您的脚本执行时，元素.button尚未添加到 dom，因此选择器不会返回任何结果，因此事件处理程序不会附加到.button元素

jQuery(function(){
    $('.button').click(function(e){
        e.preventDefault();
        $('#footer_container').animate({height:'150px'}, 500);
    });
})
于 2013-09-21T02:18:51.170 回答
1

您的罪魁祸首是您在元素出现在 DOM 之前注册了处理程序。所以最终你.button没有得到附加的点击处理程序，因为在脚本执行时元素还不存在。

<div id="memberships">
<script>
$('.button').click(function(){
    $('#footer_container').animate({height:'150px'}, 500);
});
</script>
<a href="#" class="button">Click to see our memberships.</a>
</div>

始终安全的选择是将其附加到文档就绪处理程序中。即$(function(){...});并将其放置在页面上的任何位置或外部 js 文件中。因为只有当它所在的文档准备好并且元素可用时才会加载它。

所以你会这样做：

$(function(){
     $('.button').click(function(e){
        e.preventDefault(); //just prevent the default behavior of the hyperlink
        $('#footer_container').animate({height:'150px'}, 500);
    });

});

此外，将 html 与脚本混合通常是一种不好的做法。它很难维护，并且会表现出不可预测的行为。

于 2013-09-21T02:20:09.213 回答