每次单击 JQuery 按钮，显示/隐藏表单答案

【问题标题】：JQuery button each click, show/hide forms每次单击 JQuery 按钮，显示/隐藏表单
【发布时间】：2013-01-18 21:40:19
【问题描述】：

我想我才刚刚开始，所以不妨寻求任何帮助，因为我对这个新手问题感到非常沮丧......

我有一个显示我创建的表单的按钮，只需单击一次，但是当我想显示带有另一个按钮的另一个表单时，问题就来了。

我想要的，基本上是buttonA显示formA，但是当我点击buttonB时，我想隐藏formA并显示formB。现在发生的事情是它覆盖了formA 和formB。

这是我当前的代码..

function runEffect() {
  $( "#effect" ).show( "drop");
};

function runEffect2() {
  $( "#effect2" ).show( "drop");
};


//callback function to bring a hidden box back
function hideEffect() {
    $( "#effect:visible" ).hide( "drop");

};

// set effect from select menu value

$( "#button" ).each(function(index) {
  $(this).click(function(){
  runEffect();
    });
});

$( "#button2" ).each(function(index) {
  $(this).click(function(){
  runEffect2();
    });
});

$( "#effect" ).hide();
$( "#effect2" ).hide();

我知道这很容易，但我似乎找不到答案。

谢谢！

【问题讨论】：

标签： javascript jquery button hide show

【解决方案1】：

我还没有测试过，但也许你想要一个更动态的功能。按钮类必须是“formButton”之类的东西，id 应该是“form1Button”，然后表单 id 应该是“form1”等等..

（表单 2 会有一个按钮，类为“formButton”，id 为“form2Button”，表单 2 需要 id 为“form2”

$(".formButton").click(function(e) {
    e.preventDefault(); //prevent default action

    var id = $(this).attr('id');
    var formId = id.replace('Button', '');

    $('#' + formId).show(); 
    $('form').not(document.getElementById(formId)).hide();

});

当一个 formButton 被点击时，表单将被显示。所有其他没有请求 ID 的表格将被隐藏。

【讨论】：

【解决方案2】：

试试这个

function runEffect() {
  $( "#effect" ).show( "drop");
  $( "#effect2" ).hide( "drop");
};

function runEffect2() {
 $( "#effect2" ).show( "drop");
 $( "#effect" ).hide( "drop");
};

【讨论】：

【解决方案3】：

$('#buttonB').click(funciton()(
$('#formA').hide();
$('#formB').show();
});

这样的？

【讨论】：