使用jQuery在按钮按下时隐藏元素

Question

我有一些与特定选项相关联的按钮，当其中一个按钮被点击后，我想显示与该选项相关的表单并移除按钮。在开始时，我隐藏了所有表单，所以用户必须首先点击按钮。这是代码：

$(document).load(function () {
    $("#radial, #rect").hide();
});
$("#rectS").click(function () {
    $("#rect").show(slow);
    $(".confirm").remove();
});
$("#radialS").click(function () {
    $("#radial").show(slow);
    $(".confirm").remove();
});

但它什么都不做，也没有人能告诉我为什么。顺便说一下，开头的隐藏也不起作用。jQuery 真的很令人沮丧...

Codepen：http://codepen.io/megakoresh/pen/HJEzx

- Megakoresh

---

请展示HTML或提供一个小的http://jsfiddle.net/。 - Xiphias

我有一个完整的Codepen。这是一项主要针对PHP的练习，但我在jQuery方面卡住了，甚至无法进入PHP部分： http://codepen.io/megakoresh/pen/HJEzx - Megakoresh

Answer 1

你需要将 slow 改为 'slow' 。并且将你的代码放入 $(document).ready(function(){ }); 中，以在加载 DOM 元素后绑定事件。

$(document).ready(function () {
    $("#radial, #rect").hide();
    $("#rectS").click(function () {
        $("#rect").show('slow');
        //--------------^----^--
        $(".confirm").remove();
    });
    $("#radialS").click(function () {
        $("#radial").show('slow');
        //----------------^----^--
        $(".confirm").remove();
    });
});

Codepen演示

文档：http://api.jquery.com/show/

- Pranav C Balan

---

是的，我改成了“slow”，但仍然没有任何效果。我尝试将其包装在(document).ready中，但也没有任何结果。 - Megakoresh

好的，那么为什么它在我的浏览器中不起作用呢？我使用了src="//code.jquery.com/jquery-1.10.2.min.js"链接jQuery库，这样做有问题吗？ - Megakoresh

是的，我检查过了。它在 Codepen 上可以运行，但在本地 Chrome 中启动时却不行。 - Megakoresh

好的，我明白了。真是愚蠢...我必须创建一个单独的标签，并从那里链接库，然后打开另一个脚本标签并将代码放在那里，这样才能工作。但是当我将src放入初始脚本标记时就不行了。到底怎么回事...无论如何，感谢您的帮助。 - Megakoresh

@Megakoresh: 很高兴能帮助 :) - Pranav C Balan

Answer 2

尝试

将所有代码放在DOM准备好之后

$(document).ready(function () {
    $("#radial, #rect").hide();
    $("#rectS").click(function () {
        $("#rect").show('slow');
              //        ^    ^ wrap show in quotes
        $(".confirm").remove();
    });
    $("#radialS").click(function () {
        $("#radial").show('slow');
        $(".confirm").remove();
    });
});

- Tushar Gupta - curioustushar