如何让按钮在单击时提供两种不同的功能？ - jQuery/CSS答案

【问题标题】：How do I let a button serve two different functions when it is clicked? - jQuery/CSS如何让按钮在单击时提供两种不同的功能？ - jQuery/CSS
【发布时间】：2011-01-04 22:06:50
【问题描述】：

你可以在这里看到实现：http://jsfiddle.net/Chandu/AdQfB/11/

如果您第一次点击“注册”，您会看到更多字段。

我想要发生的是，当他们点击注册后点击“提交”时，它会将信息发送到服务器。

如果他们按下“登录”并填写用户名和密码字段，同样适用。

我如何做到这一点？

我在后端使用 Rails。

谢谢。

【问题讨论】：

标签： jquery ruby-on-rails css

【解决方案1】：

您可以简单地检查按钮包含的文本：

$("input#register").click(function(e) {
    if (this.value == 'Register')
        // do one thing
    else if (this.value == 'Submit')
        // do another thing
});

【讨论】：

【解决方案2】：

由于它是一个type="submit" 按钮，您可以使用默认行为并删除您的click 处理程序，如下所示：

$("input#register").click(function(e) {
  $("input#f_name").slideDown().prepend("<br /><br />").css({"display": "block"});
  $("input#l_name").slideDown().css({"display": "block"});
  $("input#confirm_pw").slideDown().css({"display": "block"})
  $("input#register").val('Submit');
  $("input#login").css({ 'color' : '#567603' });
  e.preventDefault();
  $(this).unbind("click"); 
});

You can test it out here.

【讨论】：

如果我没记错的话，这可以通过使用.once('click', ... 并删除unbind 行来缩短一点
@Michael - 你可以，这基本上是相同的行为，所以无论哪种方式 - 如果你发帖，你会得到我的 +1 :)
我喜欢这些解决方案的优雅……但它限制了用户界面，只需要单击一下即可。如果用户多次单击它会发生什么 - 但没有输入正确的信息（例如，当我添加 JS 验证时，理论上他们应该能够点击该按钮十亿次 - 如果没有输入正确的数据，它应该t 提交）。
@marcamillion - 这应该是一个不同的处理程序，理想情况下是<form>上的.submit()处理程序，如果它是无效的，它会阻止提交那里

【解决方案3】：

在展开表单的同时向注册按钮添加一个类。将提交操作与该类联系起来。在删除额外的表单元素时删除该类，对于登录，使用 else{ 扩展您的“if($("#confirm_pw").is(":visible"))”并在那里实现您的登录提交。

【讨论】：