1 个按钮上的 jQuery 多个功能

Posted 2023-05-08

【中文标题】1 个按钮上的 jQuery 多个功能

【英文标题】：jQuery Multiple Functions on 1 Button

【发布时间】：2013-03-02 00:42:06

【问题描述】：

所以我有一个按钮，我正在尝试使用多个功能。在页面加载时，上面的 div 被隐藏，一旦单击按钮，它将使 div 可见并滚动到顶部。我可以让两者分开工作，但不能一起工作。有人能指出我做错了什么吗？

$(function () 
    $("#work").hide();
    $(".button").bind("click", function () 
        $("#work").show();
    );
    $(".button").click(function () 
        $('html, body').animate(
            scrollTop: $("#work").offset().top
        , 2000);
    );
);

更新 1：

添加了一个小提琴：http://jsfiddle.net/5qQJN/1/

更新 2：

所以它设法工作，但只有在你点击一次之后。假设您单击它，跳到顶部，再次向下滚动单击，然后它会滚动动画.. 这是否意味着我需要加载窗口？

【参考方案1】：

$(function () 
    $("#work").hide();
    $(".button").click(function () 
        $("#work").show();
        $('html, body').animate(
            scrollTop: $("#work").offset().top
        , 2000);
    );
);

组合它们应该可以工作，因为似乎没有动态加载。

【讨论】：

^ this -- 我想知道为什么两个点击处理程序是必需的，这可能是 OP 的示例代码过于简化了。

感谢您的回复和编辑。但是仍然没有骰子，当我单击按钮时，div 会出现，它会滚动到顶部，但没有动画，只是直接跳转。

你能用你的 HTML 更新你的问题吗，如果可能的话，用一个 jsFiddle 来说明问题。

所以它设法工作，但只有在你点击一次之后。假设您单击它，跳到顶部，再次向下滚动单击，然后它会滚动动画.. 这是否意味着我需要加载窗口？

【参考方案2】：

我为你做了一个小提琴：http://jsfiddle.net/FaC4r/

看起来它在那里工作。不过，如果您提供了 HTML，它会有所帮助。

THE DIV IS HIDDEN UP HERE - SCROLL DOWN FOR BUTTON
<div id="work"></div>

<div id="spacer"></div>

<input type="button" class="button" value="CLICK ME TO SHOW 'WORK' AND SCROLL UP TO IT">

[根据评论更新]

我用你的新 HTML 为你编辑了 Fiddle：http://jsfiddle.net/FaC4r/2/

似乎您的 CSS 指定了一个填充为 0 的工作 div，再加上 div 中没有任何内容的事实，这意味着它是不可见的！您可以在上面的小提琴中看到，我在填充中使用 2em 以确保我实际上看到了 div 的增长和扩展。

我想说——这对于你编程生涯中的所有事情来说都是如此——使用工作示例作为基础，并逐步添加你的特定要求。尽早并经常测试。添加一件事并测试以确保它达到了您的预期。一旦你建立了一定的舒适度，你就可以扩展这个迭代周期。

希望对您有所帮助！ :)

【讨论】：

感谢您的帮助.. 奇怪的是我觉得它应该可以工作，但由于某种原因它不是。如果你注意到任何让我知道的东西，我就扔了一个小提琴，我在代码方面还是相当新的。再次感谢。